使用Chrome调试JavaScript

使用Chrome调试JavaScript如果你之前没有仔细了解过DevTools,那我相信通过这篇文章的简要介绍,应该能为你打开新世界的大门,感叹Chrome里居然“隐藏”了这么一个强大的工具。

大家好,欢迎来到IT知识分享网。

使用Chrome调试JavaScript

1 前言

JavaScript作为解释性语言,对于Web也来说,它的运行环境是浏览器(主要介绍Chrome),如果每次都是靠console.log()或alert()来打印临时变量进行程序调试,效率就太低了。

当然之前我一直都是这样干的,因为我主要还是开发后端,前端的JavaScript代码编写的不多,还能凑合调试。但当我开发Chrome扩展时,需要编写和调试大量的JS代码,这时候就不得不去掌握使用Chrome开发者工具——DevTools调试JS的技巧,不过学习起来也非常简单。如果你之前没有仔细了解过DevTools,那我相信通过这篇文章的简要介绍,应该能为你打开新世界的大门,感叹Chrome里居然“隐藏”了这么一个强大的工具。

2 认识DevTools

快捷键F12打开Chrome的DevTools,我们就会看到如下界面:
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面板,我们就会看到如下界面:
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

点击圈中双括号(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

(0)
上一篇 2024-03-26 15:33
下一篇 2024-03-26 17:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信