How do you insert ASCII art that displays in the Elements tab of the Dev tools window?

Question

I’m trying to display some ASCII art to show inside the Elements tab—NOT console.log—when someone inspects a webage.

I’m using React, so I don’t have access to the final build, which happens on the server. How and where do I insert this ASCII string to show?

"How and where do I insert this ASCII string to show?" - in JS you could set it using innerHTML, or even the lower-level DOM Node API (which predates the Element-based DOM API we use today): stackoverflow.com/questions/17931846/… — Dai
– Dai, Commented Jul 12, 2023 at 13:11
Right, that's why I suggested using the DOM API to insert new comments via JS. — Dai
– Dai, Commented Jul 12, 2023 at 13:18
@Dai Oops, didn’t realise you added both these comments, I was just replying to your first comment, ha. — Sujan Sundareswaran
– Sujan Sundareswaran, Commented Jul 12, 2023 at 13:20

Dai · Accepted Answer · 2023-07-12 13:26:02Z

A bit rusty, but like this?

const c = document.createComment( `
   ____     __   ,-----.      ___    _            .-'''-. .---.  .---.     ,-----.      ___    _   .---.      ______             .-------.   .---.        ____    ,---.   .--.,---------.         ,---.    ,---.    ,-----.    .-------.        .-''-.           ________   .---.       ,-----.    .--.      .--.    .-''-.  .-------.       .-'''-.  
   \   \   /  /.'  .-,  '.  .'   |  | |          / _     \|   |  |_ _|   .'  .-,  '.  .'   |  | |  | ,_|     |    _ \`''.         \  _(\`)_ \  | ,_|      .'  __ \`. |    \  |  |\          \        |    \  /    |  .'  .-,  '.  |  _ _   \     .'_ _   \         |        |  | ,_|     .'  .-,  '.  |  |_     |  |  .'_ _   \ |  _ _   \     / _     \ 
    \  _. /  '/ ,-.|  \ _ \ |   .'  | |         (\`' )/\`--'|   |  ( ' )  / ,-.|  \ _ \ |   .'  | |,-./  )     | _ | ) _  \        | (_ o._)|,-./  )     /   '  \  \|  ,  \ |  | \`--.  ,---'        |  ,  \/  ,  | / ,-.|  \ _ \ | ( ' )  |    / ( \` )   '        |   .----',-./  )    / ,-.|  \ _ \ | _( )_   |  | / ( \` )   '| ( ' )  |    (\`' )/\`--' 
     _( )_ .';  \  '_ /  | :.'  '_  | |        (_ o _).   |   '-(_{;}_);  \  '_ /  | :.'  '_  | |\  '_ '\`)   |( ''_'  ) |        |  (_,_) /\  '_ '\`)   |___|  /  ||  |\_ \|  |    |   \           |  |\_   /|  |;  \  '_ /  | :|(_ o _) /   . (_ o _)  |        |  _|____ \  '_ '\`) ;  \  '_ /  | :|(_ o _)  |  |. (_ o _)  ||(_ o _) /   (_ o _).    
 ___(_ o _)' |  _\`,/ \ _/  |'   ( \.-.|         (_,_). '. |      (_,_) |  _\`,/ \ _/  |'   ( \.-.| > (_)  )   | . (_) \`. |        |   '-.-'  > (_)  )      _.-\`   ||  _( )_\  |    :_ _:           |  _( )_/ |  ||  _\`,/ \ _/  || (_,_).' __ |  (_,_)___|        |_( )_   | > (_)  ) |  _\`,/ \ _/  || (_,_) \ |  ||  (_,_)___|| (_,_).' __  (_,_). '.  
|   |(_,_)'  : (  '\_/ \   ;' (\`. _\` /|        .---.  \  :| _ _--.   | : (  '\_/ \   ;' (\`. _\` /|(  .  .-'   |(_    ._) '        |   |     (  .  .-'   .'   _    || (_ o _)  |    (_I_)           | (_ o _) |  |: (  '\_/ \   ;|  |\ \  |  |'  \   .---.        (_ o._)__|(  .  .-' : (  '\_/ \   ;|  |/    \|  |'  \   .---.|  |\ \  |  |.---.  \  : 
|   \`-'  /    \ \`"/  \  ) / | (_ (_) _)        \    \`-'  ||( ' ) |   |  \ \`"/  \  ) / | (_ (_) _) \`-'\`-'|___ |  (_.\.' /         |   |      \`-'\`-'|___ |  _( )_  ||  (_,_)\  |   (_(=)_)          |  (_,_)  |  | \ \`"/  \  ) / |  | \ \`'   / \  \`-'    /        |(_,_)     \`-'\`-'|___\ \`"/  \  ) / |  '  /\  \`  | \  \`-'    /|  | \ \`'   /\    \`-'  | 
 \      /      '. \_/\`\`".'   \ /  . \ /         \       / (_{;}_)|   |   '. \_/\`\`".'   \ /  . \ /  |        \|       .'          /   )       |        \\ (_ o _) /|  |    |  |    (_I_)           |  |      |  |  '. \_/\`\`".'  |  |  \    /   \       /         |   |       |        \'. \_/\`\`".'  |    /  \    |  \       / |  |  \    /  \       /  
  \`-..-'         '-----'      \`\`-'\`-''           \`-...-'  '(_,_) '---'     '-----'      \`\`-'\`-''   \`--------\`'-----'\`            \`---'       \`--------\` '.(_,_).' '--'    '--'    '---'           '--'      '--'    '-----'    ''-'   \`'-'     \`'-..-'          '---'       \`--------\`  '-----'    \`---'    \`---\`   \`'-..-'  ''-'   \`'-'    \`-...-'   
                                                                                                                                                                                                                                                                                                                                                                                                              

` );
document.head.insertBefore( c, document.head.firstElementChild );

Screenshot:

Collectives™ on Stack Overflow

How do you insert ASCII art that displays in the Elements tab of the Dev tools window?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related