如何在Chrome DevTools控制台中区分字符串与数字？

确实！默认的颜色区分（数字蓝色、字符串黑色）在正常控制台尺寸下真的不太容易看清，我之前也被这个坑过，分享几个比看颜色靠谱得多的办法：

• 用格式化占位符显式标注类型
  Chrome DevTools支持console.log的格式化输出，用%s代表字符串、%d/%i代表数字，直接把类型标识写在输出里：

  console.log("这是字符串: %s，这是数字: %d", "Hello World", 789);
  

  输出会直接带上明确的类型说明，完全不用纠结颜色。

• 用console.dir或直接查看变量详情
  如果是单独的变量，直接调用console.dir(yourVar)，它会展开显示变量的完整类型信息——字符串会标注String，数字标注Number。甚至更简单：直接在控制台输入变量名回车，输出内容的右侧会用小字体标注类型（比如(string)、(number)），这个比颜色清晰太多。

• 模拟Ruby的inspect自己封装函数
  既然你习惯了Ruby里puts foo.inspect的直观，完全可以在JS里写个小函数模拟这个效果：

  function inspect(val) {
    return `${val} (${typeof val})`;
  }
  // 调用示例
  console.log(inspect("我是字符串")); // 输出 "我是字符串 (string)"
  console.log(inspect(123)); // 输出 "123 (number)"
  

  这样输出直接附带类型，彻底解决辨识度问题。

至于你提到的默认颜色差异，Chrome里数字确实是蓝色、字符串是黑色，但小窗口下确实容易看错，上面的方法都比依赖颜色要实用得多。

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