浏览器chrome调试js代码简易教程

时间:2022-07-31 16:49:59

浏览器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’,或者用界面操作打开,如下图:
    浏览器chrome调试js代码简易教程

运行代码

  • 在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’ 。这时控制台会输出打印信息。
    浏览器chrome调试js代码简易教程

end