大家好,欢迎来到IT知识分享网。
文章目录
使用Chrome调试JavaScript
1 前言
JavaScript作为解释性语言,对于Web也来说,它的运行环境是浏览器(主要介绍Chrome),如果每次都是靠console.log()或alert()来打印临时变量进行程序调试,效率就太低了。
当然之前我一直都是这样干的,因为我主要还是开发后端,前端的JavaScript代码编写的不多,还能凑合调试。但当我开发Chrome扩展时,需要编写和调试大量的JS代码,这时候就不得不去掌握使用Chrome开发者工具——DevTools调试JS的技巧,不过学习起来也非常简单。如果你之前没有仔细了解过DevTools,那我相信通过这篇文章的简要介绍,应该能为你打开新世界的大门,感叹Chrome里居然“隐藏”了这么一个强大的工具。
2 认识DevTools
快捷键F12打开Chrome的DevTools,我们就会看到如下界面:
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】:全局监听器,绑定在 window 对象上的事件。
【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源文件中去了。
5 参考文档
- Chrome开发者工具官方文档(科学上网,英文官方文档很全面)
- Chrome DevTools — JS调试(这篇把调试操作讲得很详细,适合才开始接触代码调试的同学)
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/11038.html