View devtools-protocol-send-command-and-monitor.md

Playing with the protocol

You can send arbitrary commands over the protocol fairly easily.

Here's a little wrapper to simplify things:

function sendOverProtocol(method, params, cb){
  const mainConnection = WebInspector.targetManager.mainTarget()._connection;
View download-node-nightly.sh
#!/bin/bash
# Usage:
# bash download-node-nightly.sh
hasxz=$(which xzcat)
os=$(uname | tr '[A-Z]' '[a-z]')
arch=$(uname -m)
pwd=$(PWD)
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>array augmenting: push read vs concat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View protocol-v8-inspector-4604d24.json
{
"version": {
"major": "1",
"minor": "1"
},
"domains": [
{
"domain": "Runtime",
"description": "Runtime domain exposes JavaScript runtime by means of remote evaluation and mirror objects. Evaluation results are returned as mirror object that expose object type, string representation and unique identifier that can be used for further object reference. Original objects are maintained in memory unless they are either explicitly released or are released along with the other objects in their object group.",
"types": [
View open-chrome-tabs-in-safari.scpt
tell application "Google Chrome"
set tab_list to every tab in the front window
repeat with the_tab in tab_list
set the_url to the URL of the_tab
tell application "Safari" to open location the_url
end repeat
end tell
View index.html
<head>
...
<meta name="viewport" content="width=device-width">
...
</head>
View appmanifest_221380.acf
"AppState"
{
"AppID" "221380"
"Universe" "1"
"StateFlags" "1026"
}
View npm3 install performance
I have long wanted to understand what was happening during an `npm install`
I finally now have some data on that.
View index.html
<html>
<head>
<script src="modifyme.js"></script>
</head>
<body>
<h1>Testing source map reloading.</h1>
<h3>Open Dev Tools and look in the console.</h3>
<p>Execute the <code>test_sm()</code> function and follow the source links.</p>
</body>
</html>
View what-forces-layout.md

What forces layout / reflow

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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()