CSS Master

Inthischapter,we’lldelveintothebrowser-baseddevelopertoolsforChrome,Safari,

Firefox,andInternetExplorer.We’llalsoexploreafewcommand-lineNode.js-based

toolstohelpyoustreamlinetheCSSyouputintoproduction.

Browser-based Developer Tools

Mostmodernbrowsersincludeanelementinspectorfeaturethatyoucanuseto

troubleshootyourCSS.Startusingthisfeaturebyright-clickingandselectingInspect

Element fromthemenu.Macuserscanalsoinspectanelementbyclickingtheele-

mentwhilepressingtheCtrlkey.Figure3.1indicateswhatyoushouldexpectto

seeinFirefox.

Figure 3.1. The developer tools of Firefox Developer edition

InFirefox,Chrome,Opera,andSafari,youcanalsopressCtrl+Shift+I(Windows

/Linux)orCmd+Option+I(OSX)toopenthedevelopertoolspanel.Figure3.2

revealshowChromeshouldlook.

96 CSS Master