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

 发布时间:2022-04-14  245 来源:谷歌浏览器官网
谷歌浏览器电脑版 谷歌浏览器电脑版

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

谷歌浏览器安卓版 谷歌浏览器安卓版

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

谷歌浏览器苹果版 谷歌浏览器苹果版

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

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


  1. 如何调试

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

  

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


  2. 断点与 js代码修改

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

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

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


  3. 快速进入调试的方法

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

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

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

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

  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下载站!

相关阅读
怎样在360浏览器安装插件

怎样在360浏览器安装插件

浏览器中很多的功能都是借助拓展插件来完成的,这些插件可以是我们自己下载的,也会有一些浏览器中会提供扩展下载中心,像我们常用的360浏览器中就有这个功能。

chrome怎么自动翻译

chrome怎么自动翻译

chrome怎么自动翻译?下面就让小编给大家带来chrome开启页面自动翻译新手教程,对此感兴趣的朋友不要错过了。

搜狗浏览器官方版 v12.0.1.34786下载_软件介绍

搜狗浏览器官方版 v12.0.1.34786下载_软件介绍

本网站提供搜狗官网正版搜狗浏览器官方版 v12 0 1 34786下载安装包,软件经过安全检测,无捆绑,无广告,操作简单方便。

QQ浏览器缓存数据怎么清理

QQ浏览器缓存数据怎么清理

我们都知道软件长时间使用以后,就会留下很多缓存文件和别的垃圾信息,如果不及时清理,就会拖慢浏览器的反应速度。这个时候就需要我们及时的经常性的清理,清理缓存后会更方便使用,反应速度更好。下面就让我们一起来看看,在使用QQ浏览器的时候怎么清理缓存的吧!

火狐浏览器无法上网

火狐浏览器无法上网

很多使用火狐浏览器的小伙伴表示,偶尔打开浏览器时不能正常上网,任何网页都无法正常浏览,在检查过自己电脑的本地网络没有显示异常,其他软件也都可以正常使用后,许多小伙伴都十分苦恼于如何解决火狐浏览器无法上网的问题。

360浏览器内核介绍

360浏览器内核介绍

各大浏览器都是采用什么内核?内核是一款浏览器的核心部分,使得代码转化为我们能够浏览到的网页形态,并且上网速度也和其息息相关。

谷歌浏览器怎么更新到最新版本?

谷歌浏览器怎么更新到最新版本?

谷歌浏览器怎么更新到最新版本?谷歌浏览器 Google Chrome完全免费,跨平台支持 Windows、Mac 和 Linux 桌面系统,同时也有 iOS、Android 的手机版 平板版,你几乎可以在任何智能设备上使用到它。

谷歌浏览器下载设置在哪里?怎么更改?

谷歌浏览器下载设置在哪里?怎么更改?

我们要下载软件的时候,通常都会使用浏览器来下载,而浏览器都有一个默认的下载位置,比如谷歌浏览器默认就会下载在C盘,时间久了就会占用系统空间了,所以我们可以对下载设置进行修改。

如何设置谷歌浏览器的下载位置

如何设置谷歌浏览器的下载位置

如何设置谷歌浏览器的下载位置?在使用浏览器的过程中,每个人都会下载东西,浏览器默认会有下载位置。

win10系统下载谷歌浏览器打不开怎么办?

win10系统下载谷歌浏览器打不开怎么办?

谷歌浏览器​是一个非常强大的网页浏览器,很多用户都在使用。但是在使用的过程中,相信很多用户都会遇到win10系统中的Google浏览器无法上网的现象,那么该怎么解决呢?

安装谷歌浏览器错误代码“0x80004002”该如何解决?

安装谷歌浏览器错误代码“0x80004002”该如何解决?

不知道大家是否有在给电脑安装Google chrome浏览器时碰到不正确代码0X80004002的情况呢?如果你不知道如何解决?就来试试下面的这个方法吧

谷歌浏览器怎么关联使用迅雷下载?

谷歌浏览器怎么关联使用迅雷下载?

谷歌浏览器怎么关联使用迅雷下载?Chrome谷歌浏览器是目前使用人数、好评都比较高的一款浏览器了、深受用户的喜爱,追求的是全方位的快速体验。

谷歌浏览器如何把钟爱的网站变成应用

谷歌浏览器如何把钟爱的网站变成应用

你有没有想要知道的谷歌浏览器使用技巧呢呢,你知道谷歌浏览器如何把钟爱的网站变成应用吗?来了解谷歌浏览器把钟爱的网站变成应用的具体步骤,大家可以学习一下。

谷歌浏览器全线崩溃的原因和解决办法<详细操作步骤>

谷歌浏览器全线崩溃的原因和解决办法<详细操作步骤>

总结了谷歌浏览器崩溃导致这种情况的原因及几种常用的解决方法,有类似问题的快来看看吧!

如何在 Windows 上的 Chrome 中修复 YouTube 音频卡顿?

如何在 Windows 上的 Chrome 中修复 YouTube 音频卡顿?

没有什么比不稳定、断断续续的音频更能破坏好的视频了。如果您在 Windows 上使用 Chrome 时在 YouTube 上遇到此问题,请参阅以下修复程序。

如何阻止谷歌浏览器无响应?

如何阻止谷歌浏览器无响应?

使用 Google Chrome 时,您的浏览器可能会由于某些原因变得无响应。这种情况可能会令人沮丧,尤其是当您正在做一些重要的事情时。本文提供了一些提示,您可以使用这些提示来阻止您的 Google Chrome 浏览器无响应。

如何将 Chrome 中的下载内容自动保存到 Date 文件夹?

如何将 Chrome 中的下载内容自动保存到 Date 文件夹?

按日期组织下载是 Google Chrome 网络浏览器的扩展,可自动将下载保存到日期文件夹。Chrome 与其他任何浏览器一样,默认情况下会将下载内容保存到单个目录中。在 Windows 上,通常将所有内容保存到系统上的 Downloads 文件夹。

如何首次投射 Chrome 标签页

如何首次投射 Chrome 标签页

Chromecast 从任何电视流式传输电影、电视节目、音乐等内容的能力非常棒。您还可以从计算机投射到电视。