A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
(function() { | |
var CSSCriticalPath = function(w, d, opts) { | |
var opt = opts || {}; | |
var css = {}; | |
var pushCSS = function(r) { | |
if(!!css[r.selectorText] === false) css[r.selectorText] = {}; | |
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/); | |
for(var i = 0; i < styles.length; i++) { | |
if(!!styles[i] === false) continue; | |
var pair = styles[i].split(": "); |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.
I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.
Chrome 51 has some pretty wild behaviour related to console.log
in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.
var talksByLikes = [].slice.call(document.querySelectorAll('.ka-td-contents')).map((talk) => ({ title : talk.querySelector('.ka-talk-title').textContent , author: talk.querySelector('.ka-username').textContent, favs : +talk.querySelector('span.ka-button-indicator').textContent, rating : +talk.querySelector('a.ka-like-link + a.ka-social-link').textContent , ratio : talk.querySelector('a.ka-like-link + a.ka-social-link').title })); | |
var currentDay = /5693168230072320/.test(window.location.href) | |
? "5649626120060928" | |
: "5693168230072320"; | |
document.querySelector(`a[data-day-id="${currentDay}"]`).click(); | |
setTimeout(function(){ | |
talksByLikes = talksByLikes.concat([].slice.call(document.querySelectorAll('.ka-td-contents')).map((talk) => ({ title : talk.querySelector('.ka-talk-title').textContent , author: talk.querySelector('.ka-username').textContent, favs : +talk.querySelector('span.ka-button-indicator').textContent, rating : +talk.querySelector('a.ka-like-link + a.ka-social-link').textContent, ratio: ta |