在谷歌浏览器调试JavaScript

本文最后更新于:2022年7月4日 上午

本文介绍在谷歌浏览器调试JavaScript的方法。

测试代码

新建test.html文件,写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">

alert("Hello World!");
document.write("Hello World")
var vAlert={};
vAlert.show=function(msg){
alert(msg);
}
var test_var = 'test world'
vAlert.show("测试");
console.log('Hello World')
console.log(test_var)
</script>
</body>
</html>

调试运行

  • 打开谷歌浏览器

  • 运行test.html

  • F12 ,呼出开发者模式

  • 进入Sources选项卡

谷歌浏览器开发者模式

  • 在js 代码加入断点,F5刷新,单步运行

断点调试

  • 期间网页会显示代码执行效果,并且在控制台有相应输出,自己也可以在控制台调试当前环境代码

控制台调试


在谷歌浏览器调试JavaScript
https://www.zywvvd.com/notes/coding/java-script/js-debug/js-debug/
作者
Yiwei Zhang
发布于
2020年4月3日
许可协议