Chrome 开发工具 - 在控制台中显示特殊字符

Question

在 Chrome Dev Tools 中，有没有办法在控制台中显示特殊字符（当使用 JavaScript 文件中的 console.log() 时，而不是直接在控制台）？例如，如果我尝试 console.log("&clubs;")，它只输出字符串文字，而不是实际的俱乐部字符 (♣)。

Answer 1

如果您键入 document.documentElement.outerHTML.includes("enter what you are looking for between these quotes")，控制台将返回 "true" 或 "false"，以及一些上下文和 HTML 文件中的行号对，您可以单击它以查看其在整个文档中的位置。

或者，在 JavaScript 中，您可以使用 document.documentElement.outerHTML 获取包含您正在使用的整个 HTML 文件的字符串，而不是使用 indexOf("&club;") 或包含("&club;") 以获得您要查找的任何内容的 position/existence，以及 console.log() 结果。示例：

console.log(document.documentElement.outerHTML.indexOf("&club;")!=-1?
            "&club; is present! WOW! at character "+document.documentElement.outerHTML.indexOf("&club;"):
            "&club; has not appeared.");

我认为没有任何方法可以自动实现这一点。

Answer 2

如果您想在控制台上显示 ♣ 符号，那么 console.log("♣") 或 console.log("\u2663")（unicode 版本）应该可以正常工作。

如果您需要一种将 HTML 实体代码转换为控制台中实际字符的方法，那么您可以使用此方法：

function entityToChar(entity) {
  var s = document.createElement('span');
  s.innerHTML = entity;
  return s.innerHTML;
}

因为JavaScript &clubs;只是一个字符串，需要告诉浏览器它是HTML.

Chrome 开发工具 - 在控制台中显示特殊字符

Chrome Dev Tools - Display Special Characters In Console

html-entities

google-chrome-devtools

console.log