Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Hack to display CSS rule line number in Safari/Webkit/Chrome Web Inspector

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 .externalToolBuilders
Octocat-spinner-32 .settings
Octocat-spinner-32 build
Octocat-spinner-32 src
Octocat-spinner-32 .project
Octocat-spinner-32 README.markdown
Octocat-spinner-32 build.xml
Octocat-spinner-32 debug.html
Octocat-spinner-32 test.css
Octocat-spinner-32 test.html
README.markdown

Display CSS rule line number in Safari/WebKit/Chrome Web Inspector

WebKit-based browsers like Safari or Google Chrome has gorgeous Web Inspector, which, unfortunately, doesn't display CSS rule's line numbers (as Firebug does).

This hack tries to fix this problem:

Example

How to install

The installation process is quite simple: all you have to do is to add downloaded SC-CSSAdditions.js script to inspector.html (Safari, Webkit) or devtools.html (Chrome). Here's a step-by-step instruction:

  1. Download archive
  2. Unpack its contents and copy SC-CSSAdditions.js file into inspector folder. Its location is different for every browser and platform:

Mac

  • Safari: /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Resources/inspector
  • Chrome: Right-click on Google Chrome app → Show Package Contents → Contents/Versions/5.0.307.11/Google Chrome Framework.framework/Resources/inspector. The version number (5.0.307.11 in this example) may vary depending on your Google Chrome version
  • WebKit: Right-click on WebKit app → Show Package Contents → Contents/Frameworks/<Version>/WebCore.framework/Versions/A/Resources/inspector where <Version> is your current OS version (Leopard — 10.5, Snow Leopard — 10.6).

Windows

Assuming you have installed browser in default location.

  • Safari on Windows doesn't have Web Inspector by default, use Google for installation instructions
  • Chrome: C:\Documents and Settings\<UserName>\Local Settings\Application Data\Google\Chrome\Application\4.0.249.89\Resources\Inspector where <UserName> is your system user name (note that version number — 4.0.249.89 — may vary).

Open inspector.html (Safari, WebKit) or devtools.html (Chrome) in your favorite text editor and add <script type="text/javascript" src="SC-CSSAdditions.js"></script> at the end of <head> section.

Restart your browser.

Now you'll be able to see line numbers near CSS rules.

Know issues

  • Line numbers are displayed for external stylesheets only.
  • Nested rules are not supported (for example, inside @media section).

Please note that this hack is in early development state and may not provide proper line numbers for style rules. If you've found such problem please report it and provide CSS example.

How it works

Web Inspector relies on W3C's DOM mostly, which means there are no "standard" way to get line numbers for CSS rule. This hack provides another parser which reads CSS source but preserves their line numbers. When you call Web Inspector, internal CSS rules are processed and marked with line numbers form this hacky parser.

Something went wrong with that request. Please try again.