Chrome 如何调试 JavaScript? 下面本篇文章给大家介绍一下使用 Chrome 调试 JavaScript 的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
使用 Chrome 调试 JavaScript
1, 前言
JavaScript 作为解释性语言, 对于 web 也来说, 它的运行环境是浏览器 (主要介绍 Chrome), 如果每次都是靠 console.log() 或 alert()来打印临时变量进行程序调试, 效率就太低了.
当然之前我一直都是这样干的, 因为我主要还是开发后端, 前端的 JavaScript 代码编写的不多, 还能凑合调试. 但当我开发 Chrome 扩展时, 需要编写和调试大量的 JS 代码, 这时候就不得不去掌握使用 Chrome 开发者工具 --DevTools 调试 JS 的技巧, 不过学习起来也非常简单. 如果你之前没有仔细了解过 DevTools, 那我相信通过这篇文章的简要介绍, 应该能为你打开新世界的大门, 感叹 Chrome 里居然 "隐藏" 了这么一个强大的工具.
2, 认识 DevTools
快捷键 F12 打开 Chrome 的 DevTools, 我们就会看到如下界面:
Chrome 开发工具(又称 DevTools), 是一套内嵌在 Chrome 浏览器内部的 Web 编写和调试工具.
DevTools 提供给 Web 开发人员深入地访问浏览器内部和 Web 应用的机会. DevTools 可以有效地 跟踪布局问题 , 设置 JavaScript 断点 , 以及 进行 JavaScript 代码的优化 .
Chrome 浏览器的 DevTools 为我们提供了十分强大的功能, 界面按钮和信息繁多, 初次接触的话, 不免得有点恐惧. 不用担心, 接下来我们逐个部分来了解.
[Elements] : 元素面板, 查看 Web 页面的 html 与 CSS, 最重要的是可以双击元素, 对当前页面进行修改! 调试页面样式会非常非常方便!
[Console] : 控制台面板, JavaScript 输出信息的控制台, 在这里可以查看到 JS 的错误信息, 也可以执行键入的 JS 脚本.
[Sources] : 源代码面板, 我们在这个页面对 JS 代码进行调试, 可设置断点, 后面再仔细介绍.
[Network] : 网络面板, 可以明确的查看到访问 Web 页面所产生的全部请求 (包括应答状态, 响应时间, 数据量等信息) 和下载的资源文件, 并可以模拟不同的网络状态 (在线, 离线, 3G 等) 下对 Web 的加载情况, 可以用于分析和优化网页加载性能.
[Performance] : 性能面板, 记录和查看 Web 页面在浏览器中运行时的性能表现(注意是运行时, 而不是加载时), 主要用于发现 Web 页面运行时性能瓶颈和性能调优. 专注前端的同学, 有兴趣可以去深入学习下.
[Memory] : 内存面板, 记录执行 JS 函数对 CPU 和内存的使用情况, 可以识别开销大的 JS 函数, 跟踪内存泄露, 帮助代码优化, 提高 JS 执行性能.
[Application] : 应用面板, 记录 Web 页面加载的所有资源信息, 包括存储数据, 缓存数据, 图片, 字体, JS 脚本, CSS 样式表等.
[Security] : 安全面板, 查看 Web 页面的安全和认证情况, 确保网站上正确地实现了 HTTPS.
[Audits] : 审计面板, 从性能 (Performance),PWA 兼容性(Progressive Web App), 可访问性(Accessibility), 最佳实践(Best Practices), 搜索引擎优化(SEO) 这五个维度给你的网站打分, 并给出一份评估报告和优化建议, 可以说是非常的强!
虽然很想深挖每个面板中的内容, 尤其是 Web 页面性能优化方面, 但文章篇幅和个人精力有限(尤其对于写博客十分慢的我来说), 这里以后用到再延伸吧, 推荐你根据需要去了解个个面板的具体用法. 下面详细去写一写之后开发 Chrome 扩展一定会频繁用到的 JS 代码调试面板, 即 Sources 页面.
3,Source 面板
调试最重要的一个面板就是 Source 面板了, 这里着重介绍这个面板的功能. 打开 Source 面板, 我们就会看到如下界面:
共有三个区域: 资源区, 工作区, 控制台, 分开介绍.
3.1 资源区
[Page] : 展示当前 Web 页面所包含的资源文件(图片, CSS 样式表, JS 脚本等). 在这里对工作区中的代码进行修改并不会保留, 刷新页面就会重置.
[Filesystem] : 当我们的 Web 页面在本地时, 我们就可以通过 Filesystem 选项卡, 将本地项目文件夹添加到 DevTools 的工作区, 以直接将对页面的修改保存到本地, 还提供对本地文件进行管理(添加文件, 删除文件, 修改文件等). 所以也就可以让我们一边调试, 一边修改源代码, 而无需在本地和 DevTools 来回切换.
[Overrides] : 当我们的 Web 页面在远程服务器上, 本地没有项目源码, 我们也可以通过 Overrides 选项卡选定目录让 DevTools 创建一个文件夹来保存对远程 Web 页面的所有修改. 修改完成后, 用这些文件直接去覆盖远程服务器上的源文件就完成了页面的修改.
[Content script] : 用于存放的是 Chrome 扩展的 "注入" 页面的 JS 脚本的独立空间(这里的 JS 脚本共享页面 DOM 与消息机制, 与页面的 JS 脚本互相不知道对方的存在, 无法访问对方的变量和函数).
[Snippets] : 翻译过来就是片段, 可以在这里创建代码片段, 并独立运行和调试, 刷新页面不会丢失.
3.2 工作区
点击行号可以添加 / 移除断点, 在断点上打开右键菜单可以禁用断点, 以及设置断点触发条件进行编辑(比如可以设置断点在程序循环多少次后触发). 这个区域右键菜单会提供很多功能, 自己尝试看看!
3.3 控制区
这里提供有调试操作按钮, 以及一些调试信息的显示.
顶部的几个按钮便是调试代码的核心按钮了, 对于使用过其他 IDE 的同学来说, 使用起来很容易, 不多讲(如果你对调试代码不熟悉的话, 请查看文末的参考链接). 最右侧暂停图标的按钮(Pause on exception), 其作用是一旦有异常抛出就暂停代码的执行.
[Watch] : 跟踪监控变量, 点击 "+" 号添加变量名.
[Call Stack] : 函数调用栈, 显示执行路径.
[Scope] : 查看属性作用域.
[Beakpoints] : 这里可以查看到所有的断点启用状态及位置.
[XHR/fetch Breakpoints] : 当 XHR 的请求 URL 包含某一特定的字符串时所触发的断点.
[DOM Breakpoints] : 当改变一个节点或其子元素时所触发的断点.
[Global Listeners] : 全局监听器, 绑定在 Windows 对象上的事件.
[Event Listener Breakpoints] : 事件发生时所触发的断点.
4, 调试小技巧
4.1 格式化调试代码
Web 页面为了提升网页的加载速度, 常常都会将 JS 代码进行压缩, 减小 JS 文件的大小, 使 JS 文件下载速度更快. 所以 Web 页面的 JS 文件很多都是存放的压缩后源码, 非常不利于我们查看和调试.
这时候就需要格式化代码了, Chrome DevTools 为我们提供了格式化代码的功能, 藏得有些隐蔽.
点击圈中双括号 (Pretty print) 就能够将代码格式化, DevTools 会我们我们创建一份后缀为: formatted, 格式化后的文件(不过好像并不能右键 Save as 保存下来, 就只能 Ctrl+A 给复制下来, 粘到本地文本编辑器看). 之后我们调试的时候, debugger 就会跳进格式化之后的代码中来了.
4.2 设置 Blackbox
很多时候我们都会调用已封装好的 JavaScript 库代码, 最常用的比如 jQuery, 设置 Blackbox 可以将 jQuery 代码给屏蔽掉, 调试时就不再进入 jQuery 源文件中去了.
这样做可以省去我们调试的很多麻烦, 提高调试效率, 所以很有必要学会使用.
4.2.1 开始配置
[方式一] 单一 JS 文件
我们可以直接在源码页面, 右键菜单, 选中 "Blackbox script", 进行屏蔽或取消屏蔽脚本.
[方式二] 自定义规则
在 DevTools 的 Settings 中的 Blackboxing 选项卡中, 我们可以看到如下的设置:
Blackbox content scripts: 这是针对于 Chrome 扩展的 JS 脚本的一个屏蔽设置, 如果你开发过 Chrome 扩展应该明白.
Pattern: 自定义 JS 文件名匹配规则(可以使用正则表达式).
Behavior:Blackbox 启用, Disable 关闭.
Add pattern: 添加一个新的匹配规则.
4.2.2 查看效果
当我们配置好之后(这里屏蔽了文件名为 jQuery-3.3.1.min.JS 的 JS 文件), 在 Source 面板打开 jQuery 文件:
此时提示脚本被屏蔽, 点击 more 可以在里边快速取消的屏蔽.
这样一来, 再调试的时候就不会再进入到这个 jQuery 源文件中去了.
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/javascript/17398.html