Secrets of the Web Inspector

A presentation at Clique Studios Internal in October 2017 in Chicago, IL, USA by Carly Ho

Slide 1

Slide 1

Secrets of the Web Inspector

Slide 2

Slide 2

What’s the web inspector? The web inspector is a panel available in every current browser (yes, even IE!) that allows you to navigate through the components that go into rendering the web page you see. It also has a bunch of nifty features to help achieve better performance, find bugs, check mobile views, and more!

Slide 3

Slide 3

A Brief History — "View Source" / "Save as web page" — Firebug - 2006 (RIP) — Browsers start adding native developer tools (2007-2008ish)

Slide 4

Slide 4

How to open the web inspector — Mac Chrome: Cmd + Opt + I — Safari: Cmd + Opt + I — Firefox: Cmd + Opt + C — Internet Explorer/Edge: F12 Alternately, you can almost always open it via right- clicking and selecting “Inspect Element” from the context menu.

Slide 5

Slide 5

If you can't find a panel If I'm talking about something and you can't find it, ask a neighbor and/or click on this thing:

Slide 6

Slide 6

Let’s browse some code

Slide 7

Slide 7

The Elements Panel Let's go to http://clique- inspect.glitch.me/ and then open the web inspector like we just talked about! Here’s about what you’ll be looking at when you open it up:

Slide 8

Slide 8

Editing the code — Right click on elements on the page and select "inspect element" to get to that element directly in the "Elements" panel — Double click on text or an an attribute to edit its contents — Right click on a section and select "Edit as HTML"

Slide 9

Slide 9

Editing Styles In the right-hand sidebar, you can see the list of style rules that apply to the selected element — Click on properties to edit them — The "+" at the top allows you to create new style rules — ":hov" allows you to force hover/active/focus states — ".cls" allows you to add new style classes easily on the fly to keep track of a set of related properties

Slide 10

Slide 10

The Source Panel

Slide 11

Slide 11

Why is this different from the elements panel? — Can also view non-HTML files, such as javascript, raw CSS code, images included in page — Can set "breakpoints" in script files that tell it to pause at a certain point — Lists all files requested as part of loading the page Can you find the hidden cat photo in the sources list?

Slide 12

Slide 12

The Console

Slide 13

Slide 13

The console is a powerful debugging tool — Displays errors — Can also print messages from scripts being run to output debug info — You can also type javascript directly into the console Try the command the console message suggests to you and see what happens!

Slide 14

Slide 14

Responsive Testing

Slide 15

Slide 15

Open the responsive tools:

Slide 16

Slide 16

...and you'll see something like this

Slide 17

Slide 17

Responsive testing capabilities — Change viewport size to known common resolutions — Imitate device type (e.g. if some content is only show to iOS users) — Use "touch" event rather than "click"

Slide 18

Slide 18

A brief aside about the Safari web inspector and its unique tools Safari is an Apple product, which means that it gets some special tools for working with iOS! When an iPhone/iPod Touch/iPad is connected via Bluetooth or USB to your computer, you can use the web inspector to look at the content of the browser on your phone.

Slide 19

Slide 19

The iOS Simulator Apple also makes a simulator application that comes packaged with their coding suite called Xcode, which can imitate all Apple devices, from watch to iPad.

Slide 20

Slide 20

Slide 21

Slide 21

Windows Testing Internet Explorer/Edge has slightly different tools for responsive device testing, which are under the "Emulation" tab. Internet Explorer/Edge can imitate other previous versions of IE, as well as emulate Windows phones.

Slide 22

Slide 22

The Application Panel

Slide 23

Slide 23

Application Storage The main use for this panel is to deal with cookies. Cookies are the way that sites temporarily store data about you and your choices in the browser. If you're in Safari or Firefox, you'll find this under the "Storage" tab.

Slide 24

Slide 24

View the cookies:

Slide 25

Slide 25

Examples of cookie usage: — User login — Online store shopping cart — Remember that user has closed a one-time notice You might want to clear cookies to reset a feature for testing, for example.

Slide 26

Slide 26

Editing cookies In the list of cookies for the test webpage, look for one called username. Try double-clicking the value to edit it, change it to your own name, and refresh the page to see what happens!

Slide 27

Slide 27

The Audits Panel

Slide 28

Slide 28

Audits Audits contains several automated tests that you can run on a website to check if it meets certain lists of criteria. For example, you can check Google’s performance scores and whether the site meets accessibility best practices from the inspector window, even if it’s a local site.

Slide 29

Slide 29

Performance Audits For example, here’s a performance audit before setting up caching; obviously not a great score because we haven’t optimized the site yet.

Slide 30

Slide 30

Accessibility Audits Here you can see the accessibility data for the same website—it’s not doing too bad, but there’s some items we could tidy up. Has limitations (you still need a human audit!) but good to point out obvious problems

Slide 31

Slide 31

Some example accessibility audit results

Slide 32

Slide 32

More hidden tools

Slide 33

Slide 33

Where to find more tools

Slide 34

Slide 34

Animation Tracking

Slide 35

Slide 35

Geolocation Sensor Editing Before this, you'd need a proxy server to test how your site would look with different geolocation data, but you can spoof it with the tools in Chrome. Interesting note: Safari and Firefox don't have this feature, but IE does (under the bottom tab, "Emulation")

Slide 36

Slide 36

Example of the Geolocation panel

Slide 37

Slide 37

Layers The Layers panel will show you where all the components on the page are, regardless of whether they're currently visible or not Ex. go to the example page, and you can see that it shows where the hover effect on the button is, even when it's not visible—this is great for debugging

Slide 38

Slide 38

Example of the Layers panel

Slide 39

Slide 39

Network Throttling If a client has concerns about mobile performance, Chrome can "throttle" your network, which is to say pretend it's operating under worse conditions to test performance.

Slide 40

Slide 40

...and even more? — New features added all the time in Chrome — Firefox just rolled Firebug into its native suite of tools, pointing to more ahead — Try the Safari Technology Preview for cutting-edge Safari tools