chrome开发者工具功能拾遗:Sources面板篇

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月5日09:01:35 评论 466

本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工作效率。


直接修改js进行调试

chrome开发者工具中一个比较常用的功能就是在Elements面板修改css直接看效果,殊不知,原来在Sources面板中,连js都可以直接修改。
原本我也感到很惊讶,js跟css的差别很大,js是执行完就完事了,哪像css一直都有效的呀,那这修改执行完的js又能有什么作用呢?在查阅相关资料后,发现这功能主要是在设置断点(breakpoint)进行单步调试时用的,步骤如下:

  1. 直接给某行js代码设置断点。
    chrome开发者工具功能拾遗:Sources面板篇
  2. 刷新页面后,程序就会停在断点设置的那一行上。
    chrome开发者工具功能拾遗:Sources面板篇
  3. 然后我们就可以在断点那一行代码的后面添加我们自己的debug代码了,例如下面这样:
    chrome开发者工具功能拾遗:Sources面板篇
  4. 按下快捷键Ctrl + s保存,发现该面板变红了,即表示保存生效:
    chrome开发者工具功能拾遗:Sources面板篇
  5. 此时利用快捷键F10,就能最终看到刚刚添加的debug代码的效果了:
    chrome开发者工具功能拾遗:Sources面板篇

值得注意的是,由于单步调试只能往下走而不能回头,如果要重新测试的话就要刷新页面,但刷新页面会导致刚刚保存的调试代码消失,恢复到线上版本的代码。


在单步调试过程中直接查看变量

在单步调试过程中,我们总免不了看看各个变量当前的值是什么,以此来判断问题是不是出现在当前这一行代码。
查看变量值的方法还是有很多的,下面列举两种常用的:

  1. 通过Sources - Watch面板,在这里设置想要监控的变量,随着单步调试的进行,这些被监控的变量的值也会随之更新。
    chrome开发者工具功能拾遗:Sources面板篇
  2. 通过console打印变量,除了在代码里写console.log()外,其实是可以直接在单步调试的过程中直接用console来打印的,例如下图:
    chrome开发者工具功能拾遗:Sources面板篇

除了上述的这两种方法,还有更简单的方法:在单步调试的过程中,直接把鼠标移到想查看的变量,然后就会弹出个小框把变量的值给显示出来啦:
chrome开发者工具功能拾遗:Sources面板篇
这是不是非常方便咧?不过这种方法在本质上其实跟上述两种方法是一样的,都有作用域的限制。比如说,上图的那个keywords变量就是查看不了的,因为代码已经执行到了success的这个回调函数上了,已经不是在同一个作用域啦。


Snippets(程序小片段)

Snippets提供了在chrome里保存及运行一段js代码的功能,我们可以简单地把snippet当做是笔记,用来搭配直接修改js进行调试(因为刷新后添加的代码就不见了)来记录下每次调试需要用到的代码;也可以用作写一些小demo来试函数、api等功能。
chrome开发者工具功能拾遗:Sources面板篇

im, 无色
  • 本文由 发表于 2019年7月5日09:01:35
C# 开发Chrome内核浏览器(WebKit.net) Chrome开发

C# 开发Chrome内核浏览器(WebKit.net)

WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器。这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能。 第一步: 下载...
Google Chrome中的高性能网络 (三) Chrome开发

Google Chrome中的高性能网络 (三)

使用预连接优化了TCP连接管理   已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作。为什么再进一步连接到目标主机,在用户真正发起...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: