Chrome Dev Tools - Display Special Characters In Console

Question

In Chrome Dev Tools, is there a way to display special characters in the console (when using console.log() from a JavaScript file, as opposed to typing it in directly in the console)? For example, if I try console.log("♣"), it just outputs the string literal, but not the actual clubs character (♣).

Answer 1

If you want to show the ♣ symbol on your console, then console.log("♣") or console.log("\u2663") (unicode version) should work just fine.

---

If you need a method that converts HTML entity codes to the actual characters in the console, then you can use this:

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

For JavaScript ♣ is just a string, you need to tell the browser that it is HTML.

Answer 2

If you type document.documentElement.outerHTML.includes("enter what you are looking for between these quotes") the console will give you back "true" or "false", with a bit of context and the line number in the HTML file on the right, which you can click on to see its position in the document as a whole.

Alternately, in JavaScript, you can use document.documentElement.outerHTML to get a string containing the whole HTML file you are using, than use indexOf("&club;") or contains("&club;") to get the position/existence of whatever you're looking for, and console.log() the results. Example:

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

I do not believe there is any way to make this happen automatically.