js: chrome dev tools (cdt), console, performance
ways to bypass cache and evaluate "first visit" experience
- Incognito window - Disable cache - F5/ctrl-F5
console.time() for (let i = 0; i < 10000000; i++) { let sq = i ** 2 } console.timeEnd()
- create a CDT timer - timeEnd() stops and writes ms to console
let t0 = performance.now(); for (let i = 0; i < 10000000; i++) { let sq = i ** 2 } console.log(performance.now() - t0)
- measure time diff using JS built-in fn
<a onClick={() => { document.location.href = "details.html"; }}>Go to Details</a>
- navigate to link using browser object
$0.style.background="red"
- set currently active element background
console messaging beyond log
.warn(), .error()
strategies to reconsider in era of HTTP/2
1. bundling 2. CSS sprites 3. domain sharding 4. inlining
block
Block request URL or Block request domain
how to determine who's modifying a component of a page
Break on subtree modifications
which tab shows final result of all CSS rules?
Computed tab
isolate element with new CSS class that may be using broader class
add #id to element, and new class element#classname (here, id="foo"); id makes it more specific than other rules
deal with HTTPS in CDT
already decrypted
when diagnosing something on someone else's computer
avoid install 1. if Chrome, use CDT 2. set up proxy to go through your system
change border widths on fly
change the Computed tab
access Chrome experimental features
chrome://flags
if minified, how to pretty-print
click {}
console message grouping
console.group('A') console.log('A1') console.log('A2') console.groupEnd()
console log styling
console.log("%cthis should be blue", "color:blue")
sourcemaps
created during build of original code so that back out minification
console.dir
dumps thing to console console.dir(document.querySelector('section'))
console shortcut when debugging code
escape
PNG or JPG?
go with JPG - can get much smaller file with same quality
which CSS rules were used or not
green indicates rule was applied
CDT Audits
identify and fix common problems that affect performance
deal with HTTPS in fiddler
in Options; need to say Yes to cert dialogs
save changed CSS or JS
in Sources tab
determine font used to render text
in the Computed tab
slow down responses with throttling
in the Online tab
how to avoid http v https reference errors
just preface url with //
how to inspect vars
mouse over
how to quickly get to CSS for element
mouse over element and select Inspect
full reload
need CDT open, then right click on reload
stepping in/over
panel to right
CDT Audits results / opportunities
recommendations
JS performance strategies
reduce amount of data xfered, and frequency - Use HTTP compression - Content expirations (set infrequently) - Use Content Delivery Network (CDN)s - Minify - Images - use proper type and optimize
start coverage analsysis
see unused bytes
HTTP/2 server push
server pushes things (CSS, etc) after initial connection assuming it'll be requested - can be wasted if already in browser cache
CDT filmstrip view
shows page as it's rendered - simply mouse along
HTTP/2 main improvement
single multiplexed connection; don't need multiple connections to download multiple things
console assertion
specify failure message
console.trace
stack dump function foo () { console.trace() } foo()
how to break into debugger
use 'debugger' anywhere in JS
examine or change vars while debugging
use console and type the var or function name
how to see performance in Chrome Dev Tools
using Network tab - also Performance tab; bottom for info on request and amount xferred