All Projects → bahmutov → Code Snippets

bahmutov / Code Snippets

Chrome DevTools code snippets

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Code Snippets

Embedme
Utility for embedding code snippets into markdown documents
Stars: ✭ 113 (-93.51%)
Mutual labels:  snippets
Kubectl Sheetcheat
The Definitive Kubectl Sheetcheat. ⭐ Give it a star if you like it. Work (always) in progress !
Stars: ✭ 119 (-93.16%)
Mutual labels:  snippets
Coddx Alpha
Coddx - a collection of tools that help developers program efficiently. One of the features is generating multiple files from templates quickly.
Stars: ✭ 132 (-92.42%)
Mutual labels:  snippets
Custom Calendar View
The CustomCalendarView provides an easy and customizable calendar to create a Calendar. It dispaly the days of a month in a grid layout and allows to navigate between months
Stars: ✭ 113 (-93.51%)
Mutual labels:  snippets
Borg
Search and save shell snippets without leaving your terminal
Stars: ✭ 1,528 (-12.23%)
Mutual labels:  snippets
Chrome Devtools Java Client
Chrome DevTools java client.
Stars: ✭ 121 (-93.05%)
Mutual labels:  chrome-devtools
Chrome Devtools Protocol
Chrome Devtools Protocol client for PHP
Stars: ✭ 112 (-93.57%)
Mutual labels:  chrome-devtools
Crrri
A Chrome Remote Interface written in R
Stars: ✭ 137 (-92.13%)
Mutual labels:  chrome-devtools
Polydev
Automatic web components profiling in chrome devtools
Stars: ✭ 118 (-93.22%)
Mutual labels:  chrome-devtools
The Way
A command line code snippets manager
Stars: ✭ 132 (-92.42%)
Mutual labels:  snippets
Vscode Matlab
MATLAB support for Visual Studio Code
Stars: ✭ 114 (-93.45%)
Mutual labels:  snippets
Foundationextension
Foundation/Cocoa/UIKit extension kit. Reference document:
Stars: ✭ 115 (-93.39%)
Mutual labels:  snippets
Immutable Object Formatter Extension
Make ImmutableJS objects more readable when viewed in Chrome DevTools
Stars: ✭ 125 (-92.82%)
Mutual labels:  chrome-devtools
Itnotes
个人笔记,IT相关。
Stars: ✭ 113 (-93.51%)
Mutual labels:  snippets
Solang
First fully featured programming language for Stack Overflow Driven Development
Stars: ✭ 133 (-92.36%)
Mutual labels:  snippets
Capturecalls.js
captureCalls('document.getElementById') to show a stack trace for document.getElementById on its every call
Stars: ✭ 112 (-93.57%)
Mutual labels:  chrome-devtools
Refills
Refills is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.
Stars: ✭ 1,523 (-12.52%)
Mutual labels:  snippets
Rocketseat Vscode Reactjs Snippets
Rocketseat ReactJS snippets for Visual Studio Code Editor
Stars: ✭ 136 (-92.19%)
Mutual labels:  snippets
Beginners C Program Examples
Simple, Short and Sweet beginners friendly C language programs
Stars: ✭ 138 (-92.07%)
Mutual labels:  snippets
Masscode
A free and open source code snippets manager for developers.
Stars: ✭ 1,878 (+7.87%)
Mutual labels:  snippets

Chrome DevTools code snippets

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

NPM

Build status dependencies devdependencies Codacy Badge semantic-release

fist paint

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

DOM and CPU generic performance

Storage measurements

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

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.

update code snippets

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);
}());

remote

Small print

Author: Gleb Bahmutov © 2014

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].