在谷歌浏览器调试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刷新，单步运行

断点调试

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

控制台调试



文章链接：
https://www.zywvvd.com/notes/coding/java-script/js-debug/js-debug/

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