浏览器chrome调试js代码简易教程
一般的浏览器都有js调试功能,本文以chrome为例,介绍一种简易的js代码调试方法。
编写一个html文件
- 本地新建一个.html文件,暂且命名为debug.html
- debug.html中编写代码如下:
<body>
<script src="./test.js">
</script>
</body>
代码中的 test.js 是待调试的js代码。
打开调试面板
- 用chrome打开debug.html文件,显示一个空白页面。
- 打开chrome的调试功能。快捷键’option + command + i’,或者用界面操作打开,如下图:
运行代码
- 在test.js中编写你要调试的代码,例如:
function mockAsync(cb, time) {
console.log("before aync.......");
setTimeout(()=>{
console.log("after aync.......")
cb();
}, time)
}
mockAsync(()=>{
console.log("mock async")
}, 1000)
- 运行。快捷键 ‘command + r’ 。这时控制台会输出打印信息。