chrome浏览器开发者工具的使用以及调试js
来源:互联网 发布:培训机构推荐就业 知乎 编辑:程序博客网 时间:2024/05/17 06:26
怎样打开Chrome的开发者工具?
你可以直接在页面上点击右键,然后选择审查元素:
或者在Chrome的工具中找到:
或者,你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12。
打开的开发者工具就长下面的样子:
不过我一般习惯与点左下角的那个按钮,将开发者工具弹出作为一个独立的窗口:
下面来分别说下每个Tab的作用。
Elements标签页
这个就是查看、编辑页面上的元素,包括HTML和CSS:
左侧就是对页面HTML结构的查看与编辑,你可以直接在某个元素上双击修改元素的属性,或者你点右键选"Edit as Html"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现。(注:看到上面右键菜单的最后一个选项"审查元素"了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦,嘿嘿)
2.如何调试js
基本环境
Sources Panel 的左边是内容源,包括页面中的各种资源。其中,又分 Sources 和 Content scripts。Sources 就是页面本身包含的各种资源,它是按照页面中出现的域来组织的,这是我们要关注的。异步加载的 js 文件,在加载后也会出现在这里的。Content scripts 是 Chrome 的一种扩展程序,它是按照扩展的ID来组织的,这类扩展实际也是嵌入在页面中的资源,它们也可以读写DOM。编写、调试这类扩展的开发者才要关心它们,如果你的浏览器没安装任何扩展,那么 Content scripts 就看不到任何东西。
Sources Panel 的中间主区域用于展示左边资源文件的内容。
Sources Panel 的右边是调试功能区,最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。下面是各种具体的功能区。稍后介绍。
注意,左右两边的区域默认可能收缩在两侧没有显示出来,点击两侧的伸缩按钮 展示出来。左边区域展示出来时默认是自动收缩状态,点击旁边的 pin 按钮 就不会缩回去了。
最下面还有一些功能按钮很有用。
在源代码上设置断点
通过左边的内容源,打开对应的 JavaScript 文件,鼠标点击文件的行号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的 Breakpoints 列表中,点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话,利用 Breakpoints 列表中的断点快速定位非常方便。
对于每个已添加的断点都有两种状态:激活和禁用。刚添加的断点都是激活状态,禁用状态就是保留断点但临时取消该断点功能。在 Breakpoints 列表中每个断点前面都有一个复选框,取消选中就将禁用该断点。断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面按钮临时禁用所有已添加的断点,再点一下恢复原状态。
条件断点:在断点位置的右键菜单中选择“Edit Breakpoint...”可以设置触发断点的条件,就是写一个表达式,表达式为 true 时才触发断点。
查看断点的环境
调用栈(Call Stack):在断点停下来时,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,比如有一个函数 g() 其中又调用了函数 f() ,而我在 f() 中设置了一个断点,那么我在 console 中执行函数 g() 的时候会触发断点,其调用栈显示如下:
最上面是 f(),然后是 g()。调用栈中的每一层叫做一个 frame,点击每个 frame 可以跳到该 frame 的调用点上。
此外,还可以在 frame 上用右键菜单重新开始执行当前 frame,也就是从该 frame 的开始处执行。比如在函数 f() 的 frame 上 Restart Frame, 断点就会跳到 f() 的开头重新执行,context 中的变量值也会还原。这样结合变量修改和编辑代码等功能,就可以在当前 frame 中反复进行调试,而不用刷新页面重新触发断点了。
查看变量
Call Stack 列表的下方是 Scope Variables 列表,在这里可以查看此时局部变量和全局变量的值。
执行选择的代码
在断点调试时,可以用鼠标选择想要查看的变量或表达式,然后右键菜单执行“Evaluate in Console”,就可以看到该表达式的当前的值了。
中断下次要执行的 JavaScript 语句
右侧调试区的上面的“中断/继续”按钮还有一个功能,在没有触发断点时,点一下这个按钮就会进入“准备”中断的状态,页面下一次执行 JavaScript 语句时会自动中断,比如触发了一个点击动作时会执行的代码。
临时修改 JavaScript 代码
通常我们在调试代码时习惯:修改代码→刷新页面→重新检查,这么一个循环。但其实 Chrome 中可以临时修改 JS 文件中的内容,保存(Ctrl+S)就可以立即生效,结合 Console 等功能就可以立即重新调试了。但注意这个修改是临时的,刷新页面修改就没了。
异常时断点
在界面下方能看到按钮,它是设置程序运行时遇到异常时是否中断的开关。点击该按钮会在3种状态间切换:
- 默认遇到异常不中断
- 遇到所有异常都会中断,包括已捕获的情况
- 仅在出现未捕获的异常时才中断
主要解释一下状态2和状态3的区别
<p style="margin-top: 0px; margin-bottom: 10px; padding-top: 0px; padding-bottom: 0px;"><span class="kwd" style="color: rgb(0, 0, 136);">try</span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="kwd" style="color: rgb(0, 0, 136);">throw</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="str" style="color: rgb(0, 136, 0);">'a exception'</span><span class="pun" style="color: rgb(102, 102, 0);">;</span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="kwd" style="color: rgb(0, 0, 136);">catch</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">e</span><span class="pun" style="color: rgb(102, 102, 0);">){</span><span class="pln" style="color: rgb(0, 0, 0);"> console</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">log</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln" style="color: rgb(0, 0, 0);">e</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pun" style="color: rgb(102, 102, 0);">}</span></p>上面 try 里面的代码会遇到异常,但是后面的 catch 代码能够捕获该异常。如果是所有异常都中断,那么代码执行到会产生异常的 throw 语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。
有时候我们需要监听某个 DOM 被修改情况,而不关心是哪行代码做的修改(也可能有多处都会对其做修改)。那么我们可以直接在 DOM 上设置断点。
如图所见,在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点:
- 子节点修改
- 自身属性修改
- 自身节点被删除
选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来,如下图所示。
0 0
- chrome浏览器开发者工具的使用以及调试js
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
- chrome浏览器开发者工具的使用
- chrome浏览器开发者工具的使用
- chrome浏览器调试工具的使用
- Firefox、Chrome、IE浏览器开发者工具的使用
- Google Chrome 浏览器 开发者工具 使用教程
- Google Chrome 浏览器 开发者工具 使用教程
- Google Chrome 浏览器 开发者工具 使用教程
- Chrome浏览器开发者工具
- Google Chrome浏览器JS调试工具
- Google Chrome浏览器JS调试工具
- Chrome开发者工具调试
- Chrome开发者调试工具
- Chrome开发者工具的使用
- Connection reset by peer: socket write error错误分析及解决 .
- 如何减少C++编写程序的CPU使用率
- ios cookie操作
- 好记性不如烂笔头(零)
- 常用 CSS 中文字体 Unicode 编码表
- chrome浏览器开发者工具的使用以及调试js
- 软件项目需求开发过程实践之业务建模用例图
- JavaScript ==和=== 的不同之处
- Mysql字符集
- Android Studio 百度地图开发(二)GPS定位
- 简单的TCP通信
- sql语句 unit all和unit
- 面向对象--this、static、封装
- SD卡的读与写