新手使用alert查看变量调试代码，是否有更优的替代方案？

你之前用的alert()和document.write()都会打断页面正常运行逻辑，且对复杂类型数据的展示效果很差，更推荐用以下两类方法：

1. 控制台打印API #

浏览器自带的console系列方法是最常用的调试打印工具，不会阻塞页面运行，支持完整展示所有数据类型的结构：

• 基础打印用console.log()，可以同时传入多个参数，也可以加标注方便定位：

  var randomvariable = 2 // 注意你原示例里变量名多写了一个e，会导致运行报错
  randomvariable = randomvariable + 1
  console.log('randomvariable当前值：', randomvariable)
  

  按F12打开浏览器开发者工具，切换到「控制台」面板就能看到打印结果。
• 针对不同场景还有更高效的打印方法：
  • console.table()：打印数组、对象类型数据时会自动生成结构化表格，层级关系一目了然
  • console.dir()：可以完整展示DOM节点、复杂对象的所有内置属性，比console.log()展示的信息更全
  • console.warn()/console.error()：会用黄色警告/红色错误样式展示日志，方便在大量打印内容里快速定位关键信息

2. 断点调试 #

不需要在代码里加任何打印语句，直接通过浏览器开发者工具的断点功能就能实时查看变量变化：

• 按F12打开开发者工具，切换到「源代码」（Sources）面板
• 找到你编写的JS文件，在需要查看变量的代码行左侧点击，就会打上一个蓝色断点标记
• 刷新页面重新运行，代码执行到断点位置时会自动暂停，右侧「作用域」（Scope）面板会展示当前上下文所有变量的实时值，还可以通过逐行运行按钮控制代码执行节奏，观察变量的动态变化过程

内容的提问来源于stack exchange，提问作者CreativeDrone