Chrome开发者工具详解( 二 )

2022-04-21

文章插图

Console面板在开发用来调试的时候比较多
api功能：控制台的核心对象是Console，如果我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行；或者用"console.dir(console)",同样可以实现查看console对象的方法和属性；

文章插图

我们可以用console来调试js代码：
对于某个功能不好使的时候开发就会先看看控制台有没有报错，控制台面板中一般会打印一些报错信息，类似于App日志一样，可以定位到哪个文件，帮助我们定位问题。

文章插图

代码执行到161行，如果想打印下"result"，就可以在Console中进行调试，输入代码："alert("result="+result);"回车即可，即可弹出result的结果；

文章插图

或者是输入代码"console.log("result="+result);"直接打印结果也可，如下图：

文章插图

对于一些简单的js语句，可以直接在控制台中输入来查看结果：

文章插图
【Chrome开发者工具详解】
3、Sources面板：打开sources面板;直接给某行js代码设置断点。

文章插图

刷新页面后，程序就会停在断点设置的那一行上。

文章插图

然后我们就可以在断点那一行代码的后面添加我们自己的debug代码了，例如下面这样：

文章插图

按下快捷键Ctrl + s保存，发现该面板变红了，即表示保存生效：

文章插图

在单步调试过程中直接查看变量：
1、通过Sources - Watch面板，在这里设置想要监控的变量，随着单步调试的进行，这些被监控的变量的值也会随之更新。

文章插图

在最右侧的状态栏中，scope -> local，看到一些信息，otime是断点374行的调试信息

文章插图

2、通过console打印变量，除了在代码里写console.log()外，其实是可以直接在单步调试的过程中直接用console来打印的，例如下图：

文章插图

也可以直接把鼠标放在想要查看的变量上面选择它就可以看到变量值，如图：

文章插图

或者直接在控制台中输入该变量名回车：

文章插图

文章插图

文章插图

文章插图

设置好了断点，下图的这几个按钮就非常有用了，他们出现在右边栏的顶部。

文章插图

第一个按钮（像播放一样的按钮）是暂停和开始。
F8：快捷键，执行到最后一步
如果我们想要跳过当前的断点继续执行js，就可以点击这个按钮，点击之后js的执行会继续，如果在接下来的执行过程中再次遇到断点，那么就会在那个断点处暂停。
第二个按钮：

文章插图

F10：逐语句执行，执行到下一步
鼠标悬浮，会出现一段英语step over next function call（单步执行函数调用），可以理解为逐步执行或者逐语句执行，点击这个按钮。
点击之后会发现程序进去下面一行，调试会一步步进行

推荐阅读

上一篇：径山茶打假,径山茶功效及作用介绍

下一篇：决明子泡茶次放多少,泡茶时放茶叶多少到底有没有关系