CSS Master

EarlierversionsofInternetExplorerandcurrentversionsofFirefoxignoreunrecog-
nizedpropertiesandvalues,anddon’tdisplaytheminthestylesinspector.

Whenitcomestobasicdebuggingandinheritanceconflicts,whicheverbrowser
youuseisofnoconsequence.Youshouldstillfamiliarizeyourselfwithallofthem
forthoseoccasionswhenyouneedtodiagnoseabrowser-specificissue.

Multi-device Tools

On-devicetestingisalwaysbest,butduringdevelopment,it’softenhelpfultosim-
ulatemobiledeviceswithyourdesktopbrowser.Allmajordesktopbrowsersexcept
forSafari< 9 includeamodeforresponsivedebugging.

Chrome and Opera

ChromeandOpera19+offeradevicemodefeatureaspartofitsdevelopertoolkit.
Touseit,clickthedeviceicon(picturedinFigure3.10)intheupper-leftcorner,
nexttothesearchicon.

Figure 3.10. The device mode icon in Chrome 40

DevicemodeletsyouemulateseveralkindsofAndroidandiOSdevices,including
theBlackBerryZ10andiPhone,asshowninFigure3.11.Devicemodealsoincludes
anetworkthrottlingfeatureforapproximatingdifferentnetworkspeeds.

Debugging and Optimization 103