chrome-调试技巧个人总结

置顶国王不在家

已于 2023-12-03 23:40:55 修改

阅读量6.7k

点赞数 11

分类专栏： chrome 文章标签： chrome 前端 javascript

于 2023-02-16 22:06:34 首次发布

本文链接：https://blog.csdn.net/badbaby52906/article/details/128973527

版权

chrome 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、调试hover样式

1、第一种方法就是利用debugger（推荐）

在控制台输入下面一段代码（时间自己决定）并执行，返回页面，鼠标放在需要调试的dom上，把hover样式显示出来，等待 debugger，然后就能安心调试hover样式了。

setTimeout(()=>{
    debugger
},1800)

改进版本：

1）先在控制台输入以下代码。注意不要回车，控制台的光标会一直在。

debugger

2）然后将鼠标放在需要hover的dom上，使其出现hover样式，这个时候回车，就能调试了。

2、利用控制台“元素”选项调试

先定位到要调试的元素，然后咔咔一顿操作，见下图。不推荐。

2、控制台的$操作符

$0【获取调试选中dom】

先在元素面板中选中dom，右边就会显示$0。然后在控制台执行$0，结果就是刚才选中的dom。

操作一：

操作二:

$1【返回上一次$0的执行结果】

执行两次$0选中不同元素，再打印$1，结果是第一次的$0的结果。

$_ 【返回上一次控制台执行的结果】

先执行2+3返回5，然后执行$_ 结果是5（也就是上一次执行的结果）

$i 【为控制台下载包】

完整的使用$i操作需要先在 chrome 安装 Console Importer插件。

以常用的lodash为例：

$i是使用cdn，不用担心内存。。。

3、断点（包含条件断点）调试以及相应面板介绍

先准备两个函数，在bar函数中使用debugger，代码如下。

	        function foo() {
				let result = 0
				for (let i = 0; i < 10; i++) {
					result += i
				}
				result = bar(result)
				return result
			}

			function bar(result) {
				debugger
				result += '%%'
				return result
			}
			foo()

执行后，来到源代码面板，在合适的位置，比如下面的12行，点击鼠标右键，有个“添加条件断点”，点击这个选项，输入条件，比如“i==4”。CTRL+R重新执行，会发现断点在设置的条件断点出停下，并且此时的 i 等于4，这个时候想做什么就能做什么了。

最后再介绍下右边的操作区域。

第一部分是调试操作键，具体说明如下：

序号	按钮名	说明	作用
1	继续执行脚本	遇到断点或错误会停下来	常用于跳到下一个断点
2	跳到下一个函数调用	连续两个函数调用，正常情况下不会进入函数体，直接拿结果。（但是函数体中有断点或错误进入函数体并跳到对应位置）	广义的下一步，请无脑用。（多数情况下用这个就行，不用单步调试）
3	进入下一个函数调用	顾名思义	进入函数体，想干嘛就干嘛
4	跳出当前函数	顾名思义	跳出函数体后，想干嘛就干嘛
5	单步调试	不管什么情况，遇到函数调用就会进入函数体	狭义的下一步，很少用
6	停用断点	顾名思义	停用断点，可以用
7	在遇到异常时停止	开启后，有异常就会在异常处停下。	很好用，建议开启