Last Updated: September 12, 2017
·
16.47K
· praveenvijayan

Chrome : goto line number from page view source

Its is not possible to goto line number from chrome view source tab. Chrome plugin or bookmarklet won't work in view source tab, but developer tools.

Code

var lno = function(no){
var tr = document.querySelectorAll('tr');
offset = tr[no-1].offsetTop;
window.scrollTo(0, offset);   
}

Usage

Paste above code in console & enter.
Take any page's view source and type following in console
lno(10)
You will be taken to the specified line number.

Save as snippet

  1. Go to -> chrome://flags/
  2. Enable -> Enable Developer Tools experiments.
  3. Open dev tools and open settings (wheel icon)
  4. Click on experiments
  5. Check "Snippets suport"
  6. Open Dev tool & click on source panel, then click on Snippets tab add above code.

alt text

Now goto line is always present in dev tools and you can run it whenever you need.

Update with keyboard shortcut

Run following code from console & press ctrl + L to get line no prompt. Don't forget, it will work only on view source page. Save it as snippet for future use.

document.addEventListener('keydown', function(e){ if(e.ctrlKey &&    e.keyCode == 76){
    var tr = document.querySelectorAll('tr'), 
    lno = prompt("Line no:"),
    offsetNumber = tr[lno-1] || tr[tr.length-1],
    offset = offsetNumber.offsetTop;
    window.scrollTo(0, offset); 
}})

3 Responses
Add your response

That's a pretty nifty addition. I haven't found a use-case for it just yet, but I've added it as a Snippet in case it ever comes in handy.

Thanks for the tip.

It took me a bit to find the Snippets tab, but now that I've reread your steps after successfully adding it, I'm guessing that > was supposed to indicate the Show Navigator button in the top left and wasn't just an arrow.

over 1 year ago ·

@ericrallen Thanks for the note. I rewrote last step a bit and added screenshot for more clarity. I'm using this snippet when validating web pages. w3c validation shows error line no, but from chrome its not possible to go directly to that line. Its a handy feature during validation & FF has this feature by birth (cmd + L).

over 1 year ago ·

I've created a Chrome view-source: Go To Line bookmarklet that works on any view-source: page in Chrome w/out needed to muck about in the developer tools.

over 1 year ago ·