1、开始调试：右键审查元素

2、按钮功能：

调出控制台；
切换开发环境全屏还是嵌入；
清空当前显示；
将压缩 js 文件格式化缩进规整的文件；

3、常用页面功能：

查看、编辑（双击）HTML；
查看选中代码的代码嵌套路径；
查看、编辑当前选中代码所用的CSS代码；
查看选中元素的盒模型；
监听事件；
查看属性，比手册还方便；

查看、编辑当前站点的CSS、JS源文件；
加断点调试js代码：单步、跳出跳入循环、查看变量的值；

控制台输出打印案例：

查看站点在作出一个动作时都加在了哪些文件；
查看文件有木有正确加载、加载方式、状态、类型、大小、所用时间；
点击查看该文件的具体情况；

转载于:https://www.cnblogs.com/jsplyy/p/5616071.html

chrome调试技巧相关推荐

chrome控制台如何把vw显示成px_你可能不知道的chrome调试技巧
本文是对常用的chrome调试技巧进行总结整理,如果你没有深入了解过chrome调试工具,此处总有你不知道的惊喜! 从 Chrome 说起对于大部分人来说,Chrome 可能只是个浏览器,但是对于开 ...
你不知道的Chrome调试技巧
你不知道的Chrome调试技巧 Chrome介绍 Chrome 是一款由 Google 公司开发的网页浏览器,该浏览器基于其他开源软件撰写,包括 WebKit,目标是提升稳定性.速度和安全性,并创造出 ...
Chrome 调试技巧 1
写在前面本文包括浏览器调试,不包括web移动端调试. 本文调试均在chrome浏览器进行 alert 这个不用多说了,不言自明 console 基本输出想必大家都在用console.log在控制台 ...
Chrome 调试技巧
前言: 除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率. Sources页 command + p 文件跳转使用Sublime的人或习惯用comm ...
【Chrome】871- 9 个常用 Chrome 调试技巧
作者:Jimmy,链接:https://juejin.im/post/6881439870380834830 如果你是一个前端开发者,你接触浏览器的时间会占用你工作时间的一半,甚至更多.那么我们推荐你 ...
不常见但是有用的 Chrome 调试技巧
dom 添加选中dom节点为全局变量方便需要调试多个dom的场景适用对dom有多次操作的场景添加选中dom节点为全局变量.png force node state (触发)状态调试dom的某个状 ...
【Chrome 调试技巧】教你一步不用安装插件就可以完成--电脑页面截图
在 Chrome 的调试打开的情况下按下 [ Ctrl] + [Shift] + [P] Mac: [⌘] + [Shift]+ [P] 这里我们点击full size screenshot 整张页 ...
Chrome 调试技巧（二） console 篇
目录 1. console 中的 '$' 1.1 $0 1.2 $ 和 $$ 1.3 $_ 1.4 $i 2 console.log 的 "bug" 3. 异步的 conso ...
前端Chrome调试技巧汇总
保持鼠标放上去的效果 Ctrl+F 搜文字定位dom节点复制日志对象先右键保存全局对象console输入copy(temp1) 不同网速测试定位,通过键盘上下可以修改大小按住Ctrl ...

chrome调试技巧

1、开始调试：右键审查元素

chrome调试技巧相关推荐

最新文章

热门文章