bahmutov / code-snippets

Chrome DevTools code snippets

Chrome DevTools code snippets

Performance, debugging and testing code snippets to be run in Chrome DevTools

Read Code Snippets tutorial, Performance profiling using DevTools code snippets and How to improve Angular application performance using code snippets.

Note: code snippets do NOT have access to the full console API, for example no access to console.monitor.

Snippets

Security

• test-script-injection.js - tries to create a new inline script tag to test if page allows it.
• harlem-shake-xss.js - little XSS script that injects Harlem Shake music

DOM and CPU generic performance

• boilerplate.js - boilerplate for loading and running a remote code script (see remote download).
• first-paint.js - time from page reload to first visible contents.
• timing.js - Detailed page timing information, from addyosmani/timing.js.
• time-method-call.js - measures single method call time.
• profile-method-call.js - profiles a single method call.
• profile-prototype-method.js - profiles a single method call that is on a prototype object, not on an instance.
• profile-separate-calls.js can profile actions where separate method calls start and stop the operation.
• css-layout.js draws boundary around every DOM element for clarity.

Storage measurements

• local-storage-size.js - measures size of the strings in the localStorage.
• expensive-keys.js - measures how much space individual keys and their values take up in a collection of objects, read Measuring Space Allocation.
• keys-vs-values.js - measures length of keys vs length of values in an array.

Angular performance

• ng-count-watchers.js - counts total watchers in the page. More watchers - slower digest cycle.
• ng-idle-apply-timing.js - measures how long a digest cycle takes without any data changes. This measures purely how long all watched expressions take to compute and compare to previous values (dirty checking).
• ng-profile-scope-method.js - installs profile calls around a given scope method. When the method completes, the original non-instrumented version will be restored. The browser will have timeline and CPU profile.
• ng-run-digest-cycle.js - triggers digest cycle starting with root scope.
• ng-profile-data-change.js - changes data on the scope, runs digest cycle to profile listeners.
• ng-scope-size.js - finds total size of all user objects attached to all scopes. Smaller data - faster copying and comparison during digest cycle.
• ng-find-scope-property.js - finds all scopes that own a property with given name.
• ng-profile-local-digest.js - runs idle digest cycle starting at the scope that surrounds given selector. Useful to find parts of the page with expensive watchers.
• ng-find-expensive-digest.js builds upon ng-profile-local-digest.js to measure digest duration for several selectors and print sorted table starting with the slowest digest duration.
• ng-monitor-digest-cycle.js - prints a string every time a digest cycle runs.
• ng-count-digest-cycles.js - counts number of full digest cycles (from the root scope) that run when a scope method executes. Useful because sometimes you can get away with just a local digest cycle, rather than a full update. See Local Angular scopes.
• ng-count-digest-cycle-simple.js - keeps counting number of times the digest cycle runs.
• ng-throw-error.js throws an error from the digest cycle; useful for checking if your exception handler is working.

Misc snippets

• github-pull-request-template.js - better GitHub pull request text, based on the blog post Enforce standards while submitting a pull request by Krasimir Tsonev.
• remove-all-but.js - removes all elements in the page, except the ones in the trees with specified selectors. Can be used to quickly clean up the page and leave just the essentials.

All snippets, including mine are distributed under MIT license.

Updating local code snippets

You can update local code snippets by downloading new versions from this github repository. Create a new code snippet and copy the source from update-code-snippets.js.

Note: the approach below does not work any more, see the open issue.

You will run this code snippet in an unusual way. First, open any web page, even an empty tab. Open the DevTools in undocked mode (Command+Option+I on Mac). Then open the DevTools again, while focused on the first DevTools. This will open the second DevTools instance with the source for the first DevTools panels. If you inspect the localStorage variable in the second DevTools window, you will find lots of interesting stuff, including all the code snippets in the localStorage.scriptSnippets property.

Whenever you want to update the your local code snippets in the Chrome DevTools, execute the update-code-snippets.js snippet in the second DevTools instance. The update script looks at the your current code snippets and tries to download a file with same name from the code snippets github repository (via RawGit). If the remote file has been downloaded successfully, it will replace the snippet. After all snippets are checked, reopen the DevTools to load the updated source code.

Note, that only the latest source is downloaded, not any particular release. Also, only code snippets with names matching existing files in this repo are replaced. If you do not want to override a code snippet - just rename it, for example, remove the .js extension.

Remote download a single script

You can download and run a single snippet by using the following boilerplate (scripts are via downloaded via RawGit)

(function firstPaintRemote() {
  // form rawGit proxy url
  var ghUrl = 'bahmutov/code-snippets/master/first-paint.js';
  var rawUrl = 'https://rawgit.com/' + ghUrl;
  // download and run the script
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = rawUrl;
  head.appendChild(script);
}());

Small print

Author: Gleb Bahmutov © 2014

• @bahmutov
• glebbahmutov.com
• blog

License: MIT - do anything with the code, but don't blame me if it does not work.

Spread the word: tweet, star on github, etc.

Support: if you find any problems with this module, email / tweet / open issue on Github

code-snippets's Issues

Angular snippets

any update for Angular (2+) snippets?

Find scope with the longest running digest cycle (its own watchers only)

Similar to idle apply timing, look through scopes and time watcher evaluation. Report the scope / element that takes the longest time. Maybe highlight in red.

update-code-snippets.js not working in Chrome 45.0.2454.101

I'm getting the following error when running the snippet update-code-snippets.js to update my snippets:
Cannot find scriptSnippets, are you running in the secondary DevTools? see https://github.com/bahmutov/code-snippets#updating-local-code-snippets

My Chrome version is 45.0.2454.101 m.

I ran the snippet from the 2nd DevTools instance (following the steps in documentation) but it doesn't work - scriptSnippets key doesn't exist in localStorage. It seems that scriptSnippets are no longer stored in localStorage?

My temporary workaround to this problem is to modify the update-code-snippet.js (not nice but works for me atm):
https://gist.github.com/jchen86/3ca08af721a43725ebf6

Uncaught TypeError: Cannot read property 'invoke' of undefined

This code snippet wasn't working with the argument document, but it worked with document.body.
https://github.com/bahmutov/code-snippets/blob/master/ng-idle-apply-timing.js

snippets are no longer available via localStorage

We made snippets (among other settings) available from incognito. I think this change landed in Chrome stable around 46/47 or so.

As a result, they are no longer available in localStorage. Here's the new technique. These are run from a devtools-on-devtools window.

getting snippets

InspectorFrontendHost.getPreferences(_ => console.log(JSON.parse(_.scriptSnippets)))

setting snippets

InspectorFrontendHost.setPreference("scriptSnippets", JSON.stringify(yourSnippets))

FWIW, InspectorFrontendHost.getPreferences will return everything that has migrated to the incognito-available settings (most things), while a few items (like breakpoints) remain in the devtools' localStorage

Tagging a few other issues that use this technique:

• #6
• bgrins/devtools-snippets#28
• bgrins/devtools-snippets#35
• http://stackoverflow.com/questions/19025718/which-file-does-snippets-of-chrome-dev-tool-saved-at

How do you keep track of your mouse cursor?

I just created this cause it has annoyed me so much so often...

https://gist.github.com/SgtPooki/4506e89012250fb0e674

It should have something to enable/disable it via ESC or other key, but right now it fits my bill. Hopefully this spawns an idea, PR, or request for PR.

use build via npm script

without using the global grunt

Add grunt with jshint

Limit NPM published size

https://glebbahmutov.com/blog/smaller-published-NPM-modules/

Count number of digest cycles that run when a scope method runs

Instrument a method to count number of times the digest cycle runs.

Add accessibility.js code snippet

https://github.com/github/accessibilityjs

Should just import this module from unpkg?

Refused to load the script

I tried to run code snippet and it gave me:

Refused to load the script 'https://rawgit.com/bahmutov/code-snippets/master/first-paint.js' because it violates the following Content Security Policy directive: "script-src assets-cdn.github.com collector-cdn.github.com".

Setup semantic release

add badge

Add a couple of HTML presentation snippets

for slides / reveal.js

• add timer bar https://github.com/bahmutov/timer-bar
• show font-awesome icons

console.time is not as accurate as performance.now

Run this in your console and see for yourself. The difference is minor, but it is there.

(function(){
    var now;
    var total;
    for(var i = 0; i < 10; i++) {
        console.time('test');
        console.timeEnd('test');

        now = performance.now();
        total = performance.now()-now;
        console.log(total);
    }
})();

Setup travis build

publish on NPM

to allow versions

Typo or missing word in the README.md file.

In the "Updating local code snippets" section, the second sentence says:

"Create a code snippets and copy source from update-code-snippets.js."

Is this a typo, or is there a missing word after snippets?

Thanks.

Figure out how to cache / store / update snippets better

Need to cache / refresh scripts better without always loading them from the server.
See https://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome and localStorage solution.

Please Add this snippet

https://gist.github.com/retyui/171f95cc2e586c955b29293afe30ff40

Install pre-git

and verify the commit messages