webkit-css
webkit-css copied to clipboard
sergeche
Hack to display CSS rule line number in Safari/Webkit/Chrome Web Inspector
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:
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:
- Download archive
- Unpack its contents and copy
SC-CSSAdditions.jsfile 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/inspectorwhere<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\Inspectorwhere<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
@mediasection).
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.
sergeche