chrome如何调试javascript?

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,我们就会看到如下界面:

1.png

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面板,我们就会看到如下界面:

2.png

共有三个区域:资源区、工作区、控制台,分开介绍。

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 控制区

这里提供有调试操作按钮,以及一些调试信息的显示。

3.png

顶部的几个按钮便是调试代码的核心按钮了,对于使用过其他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为我们提供了格式化代码的功能,藏得有些隐蔽。

4.png

点击圈中双括号(Pretty print)就能够将代码格式化,DevTools会我们我们创建一份后缀为:formatted、格式化后的文件(不过好像并不能右键Save as保存下来,就只能Ctrl+A给复制下来,粘到本地文本编辑器看)。之后我们调试的时候,debugger就会跳进格式化之后的代码中来了。

5.png

4.2 设置Blackbox

很多时候我们都会调用已封装好的JavaScript库代码,最常用的比如jQuery,设置Blackbox可以将jQuery代码给屏蔽掉,调试时就不再进入jQuery源文件中去了。

这样做可以省去我们调试的很多麻烦,提高调试效率,所以很有必要学会使用。

4.2.1 开始配置

【方式一】单一JS文件

我们可以直接在源码页面,右键菜单,选中"Blackbox script",进行屏蔽或取消屏蔽脚本。

6.png

【方式二】自定义规则

在DevTools的Settings中的Blackboxing选项卡中,我们可以看到如下的设置:

7.png

  • 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文件:

8.png

此时提示脚本被屏蔽,点击more可以在里边快速取消的屏蔽。

这样一来,再调试的时候就不会再进入到这个jQuery源文件中去了。

更多web前端知识,请查阅 HTML中文网 !!

以上就是chrome如何调试javascript?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏