调试JavaScript少不了这几个技巧

发表于:2020-2-03 13:09

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:Lefex    来源:素燕

  1. 自动断点
  有时候在执行 JavaScript 代码的时候,可能来不及设置断点,代码就被执行了,其实可以通过在代码中写上 debugger(代码中第 8 行),让代码执行到 debugger 的位置自动暂停。
function a() { 
    console.log('enter a'); 
    b(); 
}  
function b() { 
    console.log('enter b'); 
    debugger; 
    c(); 
}  
function c() { 
    console.log('enter c'); 
a(); 
  2. 手动断点
  断点是程序员调试代码时非常好用的利器,通过断点调试可以看到当前执行环境中各个变量的值,以及调用堆栈,通过单步执行来查看各个步骤下代码的运行状态。如图所示(Chrome 调试面板 -> sources -> 点击代码行号即可添加断点):
  3. 打印调用堆栈
  可以通过调试面板查看当前代码的调用堆栈,也可以通过 console.trace() 打印函数调用堆栈,下面代码第 13 行。
  4. 以表格的方式打印对象
  下面是一个对象,可以通过 console.table( obj ) 来打印这个对象。
let pkg = { 
    "name": "mini_tools", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "dependencies": { 
        "jquery": "^1.12.4" 
    }, 
    "devDependencies": {}, 
    "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC" 
}; 
console.table(pkg); 
  打印结果如图所示:
  本文主要介绍几个调试 JavaScript 的技巧,这几个技巧在工作中比较有用,需要重点掌握。

      本文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号