F12 – Tools and Tips For Tuning and Debugging the Web – Obligatory About Me Section

View Github Repository Open presentation in a new window

jaredfaris

See all presentation from jaredfaris

F12 – Tools and Tips For Tuning and Debugging the Web – Obligatory About Me Section

0 3

F12Tools

On Github jaredfaris / F12Tools

F12

Tools and Tips For Tuning and Debugging the Web

Created by Jared Faris / @jaredthenerd

slides: f12talk.azurewebsites.net

source: github.com/jaredfaris/F12Tools

Obligatory About Me Section

Shameless Conference Promotion

Premise

  • Developers are used to great debugging on the server
  • Client-side development is growing crazy fast
  • There are a ton of great client-side tools
  • We're going to talk about some of them
  • Traditional dev was a lot of server side code with a thin vaneer of client side
  • You know how to debug this
  • The web became popular because it helped solve some tough deployment problems
  • not because it was great for UX
  • Modern JavaScript frameworks and the evolving HTML/CSS standards have made it possible to build rich UIs and use patterns (like MVVM)

Today's Topics

  • Preventing Cache Headaches
  • CSS Modifications
  • JavaScript Debugging
  • Mobile/Responsive tools
  • Performance Tuning
  • Crossing the Browser/Server Boundary

  • This is mostly a tools talk. I'll be trying to provide tactical things you can take away and use tomorrow.
  • Hopefully you'll walk away with at least 1 "Holy crap I can do that" items that make it worth sitting through this talk

Caveat

This stuff changes fast

Consider following the various dev team blogs:

Cache Headaches

  • If you are doing any serious debugging on the client side, cache can be killer
  • There is nothing worse than spending an hour trying to solve a problem that should not be possible with your current app, just to realize you aren't looking at your current app.

Refresh/Hard Refresh/Etc

  • Refresh loads the page contents using as much of the cache as possible to speed things up. This is your normal browsing experience.
  • Hard refresh tells the server to ignore the cache for the next page load. However, depending on the browser and the site, things that happen asynchronously (post-load) may still be cached.
  • Clearing cache and reloading lets you be *really* sure you have new everything. This may or may not be helpful to you but realize there can be a difference.

(Chrome) F12 -> F1

(Chrome) Hard Refresh

(Firefox) Gear -> Advanced Settings

(IE) Network Tool -> Always Refresh From Server

Browser Support

IE Market Share

Edge

No Windows/Old Windows?

Check out Remote IE

CSS Modifications

Hitting Refresh Sucks

  • Complex, client-side workflows
  • Slow data loads
  • Halfway through a workflow, style change, refresh, back at the start
  • Learn to use the inspector to make changes on the fly
  • Alternatively, design all your html/css before you build behavior. Have the relevant HTML render at page load

General CSS Tweaking

Oh no, the design of this page isn't quite right. It should be two column!" - Designer
Stuff
More Stuff
  • Demo changing the box-sizing.
  • Then demo and explain computed/box model/etc

(Chrome) Styles

(Firefox) Rules

(IE) Styles

What's this computed thing?

All the details on what an element is doing.

Inherited Styles

  • Each browser has a quick way of looking at the box model sizes
  • They also have a way to let you view the styles you haven't explicitly set
  • For each style, you can figure out where it's coming from

Inherited Styles 2

Messing With Hovers

You can force hover/active/focus

Demo

Change this to be highlighted

Demo

This sentence isn't fini

(Chrome) Toggle Element State

(Firefox) States

(IE) Toggle Element State

Color Picker

So What Changes Did I Make Again?

Firefox and IE will highlight your changes. Chrome will let you save files.

Previous Demo

Firefox and IE

Stuff
More Stuff

Firefox

Look for the green bar

IE

Look for the green bar

IE Bonus Feature

Changes Tab!

My Preferred Workflow

  • Build the rough HTML/CSS statically
  • Do the finishing touches in browser
  • Validate across browsers
  • Cut up the HTML and wire up the JS
  • Validate again

JavaScript Debugging

Consoles

Run arbitrary javascript, debug it and view objects!

Multi-line commands

Shift + Enter

console.table

Demo

Chrome

You can hit escape anywhere in Chrome to bring up a smaller console too.

Firefox

Escape works in Firefox too. Notice how Firefox makes you use a pain to inspect objects.

Internet Explorer

Debugger

Supported in all modern browsers. Code based breakpoint.

Example!

Fire Event!

Callstack

Callstack Demo

Fire Event!

(Chrome) Callstack

(Firefox) Callstack

(Firefox) Callrow?

(IE) Callstack

Breaking on Exceptions

Exception Demo

Fire Exception
All browsers support turning on or off breaking on exceptions with some amount of customization.

DOM Events

(Chrome) DOM Events

I'm going to get deleted!

Delete!

(Chrome) DOM Events

Just My Code

Just My Code/Blackboxing Demo!

Fire Event!

(Chrome) Blackboxing

(Firefox) Black Boxing

(IE) Just My Code

It's worth pointing out that IE had this first.

{}

Let's open some minified code

(Chrome) {} Pretty Print

(Firefox) {} Prettify Source

(IE) {} Pretty Print

Finding Events

Demo

Inspect the reveal.js arrows

(Chrome) Event Listeners

(IE) Events

(Firefox) EV

Sourcemaps

Example Sourcemap

                            {
    "version" : 3,
    "file": "out.js",
    "sourceRoot": "",
    "sources": ["foo.js", "bar.js"],
    "sourcesContent": [null, null],
    "names": ["src", "maps", "are", "fun"],
    "mappings": "A,AAAB;;ABCDE;"
}
More details here

Example

fontdragr.com

Sans-Sourcemap

(Chrome)

To disable, gear -> (uncheck) Enable JavaScript source maps.

(Firefox)

To disable, gear -> (uncheck) Show Original Sources.

(IE)

To disable, click the little button.

Promises

Chrome, Firefox

Copy/paste this in console

var p1 = new Promise(function(resolve, reject) {setTimeout(function(){ resolve("hello!")}, 3000)});

Responsive/Mobile Tools

Responsive Views

Demo

bostonglobe.com

(Chrome) Device Mode

(Chrome) Emulation

Wow EDGE is slow.

(Chrome) Media Query Browser!!!

(Firefox) Responsive Design Mode

(IE) Emulation

Performance Tools

(IE) UI Responsiveness Tool

Performance Dashboard

CTRL+SHIFT+U

UI Responsiveness Tool Demo

Fire Event!

Edge Performance Tab

Network

AJAX demo

Click here for a demo that uses CORS.

(Firefox) Edit and Resend

(Chrome) cURL

Timeline

Watching events fire

Demo

Fire Event!

Auditing

Chrome

Cookies and Storage

Chrome

Firefox

Not on by default

Firefox

Edge

Additional Tools

Glimpse

Live Demo

Demo

Great when debugging AJAX stuff.

Fiddler

Demo

Marketwatch.com

Questions?

Thank You!

Jared Faris / @jaredthenerd

slides: f12talk-pyohio.azurewebsites.net

source: github.com/jaredfaris/F12Tools