你不知道的chrome浏览器JS调试技巧-Chrome浏览器中如何调试Javascript代码

栏目:谷歌浏览器教程   来源:chrome之家   发布时间:2022-04-14   更新时间:2022-07-25

最近有一些网友提问在Chrome浏览器中如何调试Javascript代码,对于一个经验丰富的前端开发人员来说,这不是一个很难的问题,但对于一个前端开发小白来说,这的确谁是一个很棘手的问题。下面就给大家分享关于Chrome浏览器如何调试Javascript/JS代码的详细操作方法,一起来看看吧!

Chrome浏览器中如何调试Javascript代码

方法/步骤

1、升级Chrome到最新版本

参考下面经验"如何离线安装Chrome最新版本或某一特定版本?",将Chrome升级到最新版本。

2、Chrome开发者工具常见问题解答

参考下面经验"Chrome开发者工具常见问题解答",了解Chrome开发者工具常见的问题与解决方法。

3、打开开发者工具

浏览包含要调试的Javascript的页面,按下F12,打开开发者工具。

注:参考下面经验"Chrome浏览器常用键盘快捷键介绍",就可以了解Chrome常用的快捷键,掌握常用的快捷键,可以有效地提高工作效率。

4、定位到Javascript代码

选择"Sources"选项卡,在Sources面板中选择要调试的文件,在右侧会打开该文件,浏览找到要调试的JavaScript代码。

5、格式化显示JavaScript代码

如果JavaScript代码经过了加密处理,所有的代码都挤在了一行,可以按下格式化按钮,就可以可格式化显示JavaScript代码了。

6、设置调试断点

鼠标点击代码行号,就可以设置断点了。

7、单步运行代码

刷新页面或点击某个按钮,触发执行断点处的代码,代码执行就会在断点处停下来了,按F10就可以单步调试了,如果当前行代调用了某个JavaScript函数,则按F11,就可以调试进入函数内部了,按下F8就可以运行完成就运行到下一个断点处。

8、查看变量的值

鼠标移到变量上面,就会显示变量的内容,右侧调试面板中的Scope中也可以看到局部变量的内容。

9、在Console中显示或改变变量的值

在Console中直接输入变量,或是在Source中选择变量,然后点击右键,在右键菜单中选择"Evaluate in console",就可以在Console中显示变量的值了。也可以直接在Console中输入变量名=变量值,就可以修改变量的值了。

10、在Watch中监视变量的值

在Source中选择变量,然后点击右键,在右键菜单中选择"Add selected text in watches",就会将当前选择的文本内容加到Watch中了,这里的内容会随着代码的执行而动态变化。

11、查看代码调用层次关系

Call Stack处会显示当前代码的调用层次关系。

原文链接:https://www.chromezj.com/course/98.html  转载请标明

chrome之家下载站,原版谷歌浏览器

轻松下载,快速安装,安全无毒,兼容所有

立即体验
返回顶部