【第六篇】谷歌调试窗口：Javascript调试Sources面板
【第六篇】谷歌调试窗口：Javascript调试Sources面板
一. sources面板介绍
- File Navigator窗格。此处列出页面请求的每个文件。
- 代码编辑器窗格。在文件浏览窗格中选择文件后，此处会显示该文件的内容。
- JavaScript调试窗格。检查页面JavaScript的各种工具。如果DevTools窗口布局较宽，则窗格会显示在代码编辑器窗格右侧。
二. 断点调试和console.log
调试这种问题的常用方法是将多个console.log() 语句插入代码，在执行脚本时检查相关值。
虽然console.log()方法可以完成任务，但断点可以更快完成此任务。断点可让您在执行代码的过程中暂停代码，并在此时及时检查所有相关值。与console.log()方法相比，断点具有一些优势：
- 使用
console.log()，您需要手动打开源代码，查找相关代码，插入console.log()语句，然后重新重新加载此页面，才能在控制台中看到这些消息。使用断点，无需了解代码结构即可暂停相关代码。 console.log()使用断点，DevTools会在暂停时及时显示所有变量值。有时在您不知道的情况下，有些变量会影响您的代码。在语句中，您需要明确指定要检查的每个值。
简言之，与console.log()方法索引，断点可帮助您重新进行地查找和修正错误。
三. 拦截所有事件，拦截就停止运行定位代码
- 在JavaScript Debugging窗格中，单击Event Listener Breakpoints以展开该部分。DevTools会显示动画和剪贴板 等可展开的事件类别列表。
- 在鼠标事件类别旁，点击展开
。DevTools会显示单击和鼠标按下等鼠标事件列表。每个事件旁都有一个复选框。 -
勾选点击复选框。DevTools经过现在可以设置在任何
click事件侦听器运行时自动暂停。
四. 单步调试代码
五. 设置代码行断点
1. 可以直接面板左侧设置断点
2.可以代码中写：debugger进行断点
console.log('a');
console.log('b');
debugger;
console.log('c');
六. 检查变量值Scope
七. 使用条件代码行断点，感觉不好使
如果知道需要调查的确切代码区域，但只想在其他一些条件成立时进行暂停，则可使用条件代码行断点。
若要设置条件代码行断点：
- 点击 Sources 标签。
- 打开包含您想要中断的代码行的文件。
- 转至代码行。
- 代码行的左侧是行号列。 右键点击行号列。
- 选择 Add conditional breakpoint。 代码行下方将显示一个对话框。
- 在对话框中输入条件。
- 按 Enter 键激活断点。 行号列顶部将显示一个橙色图标。
八. 管理代码行断点
使用 Breakpoints 窗格可以从单个位置停用或移除代码行断点。
九。其他断点
原文地址：https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
DOM更改断点，XHR/Fetch断点（请求地址断点），事件侦听器断点（如：click），函数断点
十. 调试javascript文件
要让JavaScript更改操作生效，需按Command+ S（Mac）或Control+ S（Windows，Linux）。DevTools不能重新运行脚本，因此只能在函数内部进行的JavaScript更改才会生效。例如，在注意图产品4中，console.log('A')没有运行，而console.log('B')运行。
重新加载页面后，DevTools会清空您的CSS和JavaScript更改内容。
注：其实可以在脚本定义函数，只是需要在执行脚本前面设置断点，后面定义函数，这时js脚本还在执行就会把你定义的函数编译进系统
十一. 设置工作区
默认情况下，在Sources面板中编辑文件后，这些更改内容会在重新加载页面时丢失。您可以通过Workspace，将您在DevTools中更改的更改到您的文件系统中。
注：用处不大，就是相当于修改本地代码
使用工作区，您可以将在Devtools中所做的更改保存到计算机上同一文件的本地副本。例如，假设：
- 您在桌面上拥有站点的源代码。
- 您正在从源代码目录中运行本地Web服务器，以便可以从访问该站点
localhost:8080。 - 您已经
localhost:8080在Google Chrome中打开了，并且正在使用DevTools更改网站的CSS。
启用工作空间后，您在DevTools中进行的CSS更改将保存到桌面上的源代码中。
浙公网安备 33010602011771号