DevTools 的一个 console.log() 替代是 Watch 表达式。 使用监视表达式来监视变量随时间的变化。 顾名思义,Watch 表达式不仅限于变量。 您可以在 Watch 表达式中存储任何有效的 JavaScript 表达式。 现在就试试:
在 Sources 面板, 点击 Watch。
点击 Add Expression 按钮 。
输入 typeof sum。
按回车。 DevTools 显示 “typeof sum:"string"”。 冒号右侧的值是您的观察表达式的结果。
如预测那样,sum 被当做 string 类型 。
console.log() 的另一个替代方法是控制台。可以使用控制台来评估任意的 JavaScript 语句。 开发人员通常使用控制台在调试时覆盖变量值。 在您的情况下,控制台可以帮助找到啊修复 bug 的方法。 现在就试试:
如果您没有打开控制台抽屉,请按 Esc 键将其打开。 它将在您的 DevTools 窗口的底部打开。
在控制台中,输入 parseInt(addend1)+ parseInt(addend2)。
按回车。 DevTools 执行该语句并打印出 “6”,这是您期望演示生成的结果。
步骤 6:修复您已经确定了该 bug 的潜在修复方法。 剩下的是通过编辑代码并重新运行演示来尝试修复。 您不需要离开 DevTools 来修复 bug。 您可以直接在 DevTools UI 中编辑 JavaScript 代码。 现在就试试:
在 DevTools 的 Sources 面板,用 var sum = parseInt(addend1) + parseInt(addend2); 替换 var sum = addend1 + addend2;,这是您当前暂停的一行。
按 Command + S(Mac)或 Control + S(Windows,Linux)保存更改。 代码的背景更改为红色,表示脚本已在DevTools 中更改。
点击 Deactivate breakpoints 按钮 ,它变蓝色表示它是激活的。DevTools 忽略您设置的任何断点。
点击 Resume script execution 按钮 ,尝试使用不同的变量,现在 sum 可以正确计算了。