Chrome DevTools运行Snippets代码控制台仅输出undefined解决方法

这个现象不是代码逻辑错误，是Chrome DevTools Snippets的运行机制导致的认知偏差：

• 你看到的末尾输出的undefined，是整个代码片段执行完成后的顶层返回值，不是代码运行的错误提示。由于console.log()方法本身的返回值就是undefined，且你的代码没有其他顶层带返回值的表达式，DevTools就会默认打印这个undefined作为脚本执行的收尾提示。
• 如果你完全看不到20的输出，大概率是控制台开启了日志过滤：比如只显示错误/警告级别的信息，屏蔽了普通log级别的打印内容，导致你只能看到DevTools自动输出的undefined，看不到主动打印的计算结果。
• 很多开发者会混淆两类控制台输出：一类是代码里主动调用打印方法输出的业务内容，另一类是DevTools自动追加的代码执行返回值，很容易把后者当成代码运行的唯一结果。

• 先检查控制台过滤规则：打开Console面板顶部的筛选栏，确认选中「全部」输出级别，没有屏蔽普通日志。此时运行代码，控制台会先输出你主动打印的20，下一行才是自动追加的undefined，后者属于正常现象，不需要处理。
• 如果不想看到末尾的undefined，可以在代码最后一行加一个顶层的结果表达式，让整个脚本的执行返回值变成BMI计算结果，修改后的代码如下：

//Create your function below this line.
//The first parameter should be the weight and the second should be the height.
function bmiCalculator(weight, height){
  return Math.round(weight/Math.pow(height,2));
}


/* If my weight is 65Kg and my height is 1.8m, I should be able to call your function like this:

var bmi = bmiCalculator(65, 1.8); 

bmi should equal 20 when it's rounded to the nearest whole number.

*/

var bmi = bmiCalculator(65, 1.8); 
console.log(bmi);
// 追加顶层返回值，替换默认的undefined
bmi

• 快速验证逻辑是否正常：代码运行后直接在控制台输入bmi回车，如果返回值为20，就说明代码运行完全正常，之前只是被自动输出的undefined误导了。

提示：Snippets运行时自动打印的顶层返回值不影响代码实际执行逻辑，只要业务打印内容、变量值符合预期，就不需要针对这个undefined做额外处理。

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