我该如何进行谷歌浏览器断点调试?<基础教程>

更新时间:2022-04-14 251 来源:谷歌浏览器官网
正文介绍

  谷歌浏览器是世界上使用人数最多的浏览器,谷歌浏览器的快速、方便、简洁,一直是大家称赞的地方,谷歌浏览器一样是前端开发者的最爱,你知道该如何进行谷歌浏览器的断点调试吗?一起来和小编学学吧!


  1. 如何调试

  调试js代码,肯定是我们常用的功能,那么如何打断点,找到要调试的文件,然后在内容源代码左侧的代码标记行处点击即可打上一个断点

  

1


  2. 断点与 js代码修改

  看下面这张图,我在一个名为toggleTab的方法下打了两个断点,当开始执行我们的点击切换tab行为后,代码会在执行的断点出停下来,并把相关的数据展示一部分,此时可以在已经执行过得代码处,把鼠标放上去,即可查看相关的具体数据信息,同时我们可以使用右侧的功能键进行调试.

  右侧最上面一排分别是:暂停/继续(F8)、单步执行(新版浏览器F9、F10)、单步跳入此执行块(F11快捷键)、单步跳出此执行块(shift+F11)、禁用/启用所有断点。下面是各种具体的功能区

  在当前的代码执行区域,在调试中如果发现需要修改的地方,也是可以立即修改的,修改后保存即可生效,这样就免去了再到代码中去书写,再刷新回看了


  3. 快速进入调试的方法

  当我们的代码执行到某个程序块方法处,这个方法上可能你并没有设置相关的断点,此时你可以F11进入此程序块.

  但是往往我们的项目都是经过很多源代码封装好的方法,有时候进入后,会走很多底层的封装方法,需要很多步骤才能真正进入这个函数块.

  此时将鼠标放在此函数上,会出现相关提示,会告诉你在该文件的哪一行代码处,点击即可直接看到这个函数,然后临时打上断点,按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处

2

  4. 调试的功能区域

  每一个功能区,都有它相关的左右,先来看一张图,它都有哪些功能

  Call Stack调用栈:

  当断点执行到某一程序块处停下来后,右侧调试区的Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列,Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出,我们最先走了toggleTab这个方法,然后走到了一个更新对象的方法上,当前调用在哪里,箭头会帮你指向哪里,同时我们可以点击,调用栈列表上的任意一处,即可回头再去看看代码

  但是若你想从新从某个调用方法出执行,可以右键Restart Frame, 断点就会跳到此处开头重新执行,Scope 中的变量值也会依据代码从新更改,这样就可以回退来从新调试,错过的调试也可以回过头来反复查看

  Breakpoints关于断点:所有当前js的断点都会展示在这个区域,你可以点击按钮用来“去掉/加上”此处断点,也可以点击下方的代码表达式,调到相应的程序代码处,来查看

  XHR Breakpoints:

  在XHR Breakpoints处,点击右侧的+号,可以添加请求的URL,一旦 XHR 调用触发时就会在 request.send() 的地方中断

  DOM Breakpoints::

  可以给你的DOM元素设置断点,有时候真的需要监听和查看某个元素的变化情况,赋值情况,但是我们并是不太关心哪一段代码对它做的修改,只想看看它的变化情况,那么可以给它来个监听事件,

  当要给DOM添加断点的时候,会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中之后,Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时,代码就会在那里停下来

  Event listener Breakpoints:

  最后Event Listener 列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断


你了解了该如何进行谷歌浏览器的断点调试,还同时知道了一些其他小知识,更多谷歌浏览器相关知识就在chrome下载站!

相关下载
谷歌浏览器电脑版 谷歌浏览器电脑版

硬件:Windows系统 版本:130.0.6723.59 大小:9.75MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司

相关下载
谷歌浏览器安卓版 谷歌浏览器安卓版

硬件:安卓系统 版本:0.3.0.455 大小:187.89MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-10-11 厂商:Google Inc.

相关下载
谷歌浏览器苹果版 谷歌浏览器苹果版

硬件:苹果系统 版本:122.0.6261.89 大小:200.4MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC

苹果下载

跳转至官网

相关阅读
如何在 CentOS 7 上安装谷歌浏览器?

如何在 CentOS 7 上安装谷歌浏览器?

谷歌浏览器是谷歌的网络浏览器。它看起来很漂亮,并且与 Google 服务完美集成。Google Chrome 在 Chrome Web Store 中提供了许多扩展程序和主题,您可以使用它们来扩展它。谷歌浏览器也非常可定制。总的来说,它是一个很棒的网络浏览器。

谷歌浏览器win10用不了怎么办

谷歌浏览器win10用不了怎么办

​谷歌浏览器win10用不了怎么办?接下来就让小编给大家带来win10无法使用谷歌浏览器解决方案,还不知道如何解决的朋友,赶紧来看看详细内容!

谷歌浏览器官网下载与安装详细方法介绍!

谷歌浏览器官网下载与安装详细方法介绍!

每个浏览器都有自己独特的优势。有时候我们想在网上浏览一些文档或者打印一些考试报名表,建议用Google浏览器打开进行打印,因为用其他浏览器打印是两张纸,不可能打印成一张。下面小编就给大家分享一下如何在谷歌浏览器官网下载和安装谷歌浏览器电脑版。

chrome浏览器无法下载是什么原因?该如何解决?

chrome浏览器无法下载是什么原因?该如何解决?

谷歌的chorme浏览器是一款综合性能比较优秀的浏览器,但因为某些原因,我们无法方便快速的下载安装,偶尔通过一些搜索引擎找到的很多都是“山寨”推广的产品。

谷歌浏览器安装失败无法启动chrome安装程序怎么办?

谷歌浏览器安装失败无法启动chrome安装程序怎么办?

Google chrome是一款快速、安全且免费的网络浏览器,能很好地满足新型网站对浏览器的要求。Google Chrome的特点是简洁、快速。

电脑xp系统打不开谷歌浏览器怎么办?<解决方法>

电脑xp系统打不开谷歌浏览器怎么办?<解决方法>

谷歌浏览器是一款大家都很喜欢使用的网页浏览器,已经成为我们生活中不可或缺的软件。有时候,在xp系统中,我们会遇到打不开Google浏览器的故障。试了几次还是一样。不用太担心。这里有一个解决xp系统打不开Google浏览器的方法,有需要的小伙伴们一起来看看吧!