Skip to content

Instantly share code, notes, and snippets.

@FremyCompany
Last active January 27, 2017 04:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FremyCompany/00e3a46124b14065d97f98d7d9090b5c to your computer and use it in GitHub Desktop.
Save FremyCompany/00e3a46124b14065d97f98d7d9090b5c to your computer and use it in GitHub Desktop.
Get the line of source code that generated an element for jsfiddle/etc purposes
<!doctype html><script onload="document.scripts[0].remove()">
var html =
`<html>
<head>
<title>Test page</title>
<style>
input:hover {
outline: 3px solid red;
}
</style>
</head>
<body>
<input type=button onclick="dumpLines()" value="dump lines" />
</body>
</html>`;
var htmlLines = html.split("\n");
for(var lineIndex = 0; lineIndex < htmlLines.length; lineIndex++) {
document.writeln(htmlLines[lineIndex]);
for(var i = document.all.length; i--;) {
if(document.all[i].sourceLine == undefined) {
document.all[i].sourceLine = 1+lineIndex;
} else {
break;
}
}
}
function dumpLines() {
var text = "Elements and their computed source line:\n";
for(var i = 0; i<document.all.length; i++) {
text += ('- ' + document.all[i].tagName + ': ' + document.all[i].sourceLine) + "\n";
}
alert(text);
}
</script>
@FremyCompany
Copy link
Author

Result in Edge:
image

@FremyCompany
Copy link
Author

Lines are 0 indexed, I should have added a +1 but ok you guys got the idea :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment