v0w6sa
Last Updated: September 12, 2017
·
8.053K
· praveenvijayan
3ddd45a484a3895124de1623cb948ce2

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); 
}})
Say Thanks
Respond

3 Responses
Add your response

5807
2fc970b158d833d0e1c60e6d67eeb12e

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 ·
5808
3ddd45a484a3895124de1623cb948ce2

@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 ·
29289

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.

4 months ago ·