{"id":13583465,"url":"https://github.com/bahmutov/code-snippets","last_synced_at":"2025-05-15T14:07:26.654Z","repository":{"id":22190078,"uuid":"25522248","full_name":"bahmutov/code-snippets","owner":"bahmutov","description":"Chrome DevTools code snippets","archived":false,"fork":false,"pushed_at":"2017-07-16T12:53:04.000Z","size":1752,"stargazers_count":1816,"open_issues_count":7,"forks_count":201,"subscribers_count":77,"default_branch":"master","last_synced_at":"2025-05-07T18:57:11.486Z","etag":null,"topics":["chrome-devtools","snippets"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahmutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-21T12:56:38.000Z","updated_at":"2025-05-05T14:48:32.000Z","dependencies_parsed_at":"2022-08-07T10:01:37.548Z","dependency_job_id":null,"html_url":"https://github.com/bahmutov/code-snippets","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcode-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcode-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcode-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcode-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/code-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-devtools","snippets"],"created_at":"2024-08-01T15:03:29.995Z","updated_at":"2025-05-15T14:07:21.643Z","avatar_url":"https://github.com/bahmutov.png","language":"JavaScript","readme":"# Chrome DevTools code snippets\n\n\u003e Performance, debugging and testing code snippets to be run in Chrome DevTools\n\n[![NPM][code-snippets-icon] ][code-snippets-url]\n\n[![Build status][code-snippets-ci-image] ][code-snippets-ci-url]\n[![dependencies][code-snippets-dependencies-image] ][code-snippets-dependencies-url]\n[![devdependencies][code-snippets-devdependencies-image] ][code-snippets-devdependencies-url]\n[![Codacy Badge][code-snippets-codacy-image] ][code-snippets-codacy-url]\n[![semantic-release][semantic-image] ][semantic-url]\n\n[code-snippets-icon]: https://nodei.co/npm/code-snippets.png?downloads=true\n[code-snippets-url]: https://npmjs.org/package/code-snippets\n[code-snippets-ci-image]: https://travis-ci.org/bahmutov/code-snippets.png?branch=master\n[code-snippets-ci-url]: https://travis-ci.org/bahmutov/code-snippets\n[code-snippets-dependencies-image]: https://david-dm.org/bahmutov/code-snippets.png\n[code-snippets-dependencies-url]: https://david-dm.org/bahmutov/code-snippets\n[code-snippets-devdependencies-image]: https://david-dm.org/bahmutov/code-snippets/dev-status.png\n[code-snippets-devdependencies-url]: https://david-dm.org/bahmutov/code-snippets#info=devDependencies\n[code-snippets-codacy-image]: https://www.codacy.com/project/badge/99acaf40b1f1483c80016eb31fbaef49\n[code-snippets-codacy-url]: https://www.codacy.com/public/bahmutov/code-snippets.git\n[semantic-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\n[semantic-url]: https://github.com/semantic-release/semantic-release\n\n![fist paint](https://raw.githubusercontent.com/bahmutov/code-snippets/master/first-paint-code-snippet.png)\n\nRead [Code Snippets tutorial][1],\n[Performance profiling using DevTools code snippets][2] and\n[How to improve Angular application performance using code snippets][3].\n\nNote: code snippets do NOT have access to the full console API, for example no access to\n`console.monitor`.\n\n## Snippets\n\n### Security\n\n* [test-script-injection.js](test-script-injection.js) - tries to create a new\n  inline script tag to test if page allows it.\n* [harlem-shake-xss.js](harlem-shake-xss.js) - little XSS script that injects\n  [Harlem Shake music](https://github.com/DinisCruz/XSS-Pocs/blob/master/pocs/dance-xss.js)\n\n### DOM and CPU generic performance\n\n* [boilerplate.js](boilerplate.js) - boilerplate for loading and running a remote code script\n  (see [remote download](#remote-download)).\n* [first-paint.js](first-paint.js) - time from page reload to first visible contents.\n* [timing.js](timing.js) - Detailed page timing information,\n  from [addyosmani/timing.js](https://github.com/addyosmani/timing.js).\n* [time-method-call.js](time-method-call.js) - measures single method call time.\n* [profile-method-call.js](profile-method-call.js) - profiles a single method call.\n* [profile-prototype-method.js](profile-prototype-method.js) - profiles a single method call\n  that is on a prototype object, not on an instance.\n* [profile-separate-calls.js](profile-separate-calls.js) can profile actions where separate\n  method calls start and stop the operation.\n* [css-layout.js](css-layout.js) draws boundary around every DOM element for\n  clarity.\n\n### Storage measurements\n\n* [local-storage-size.js](local-storage-size.js) - measures size of the strings in the `localStorage`.\n* [expensive-keys.js](expensive-keys.js) - measures how much space individual keys and their values\ntake up in a collection of objects, read [Measuring Space Allocation][measure].\n* [keys-vs-values.js](keys-vs-values.js) - measures length of keys vs length of values in an array.\n\n### Angular performance\n\n* [ng-count-watchers.js](ng-count-watchers.js) - counts total watchers in the page.\nMore watchers - slower digest cycle.\n* [ng-idle-apply-timing.js](ng-idle-apply-timing.js) - measures how long a digest cycle takes without\nany data changes. This measures purely how long all watched expressions take to compute and compare\nto previous values (dirty checking).\n* [ng-profile-scope-method.js](ng-profile-scope-method.js) - installs profile calls around a given\nscope method. When the method completes, the original non-instrumented version will be restored.\nThe browser will have timeline and CPU profile.\n* [ng-run-digest-cycle.js](ng-run-digest-cycle.js) - triggers digest cycle starting with root scope.\n* [ng-profile-data-change.js](ng-profile-data-change.js) - changes data on the scope, runs digest cycle\nto profile listeners.\n* [ng-scope-size.js](ng-scope-size.js) - finds total size of all user objects attached to all scopes.\nSmaller data - faster copying and comparison during digest cycle.\n* [ng-find-scope-property.js](ng-find-scope-property.js) - finds all scopes that own a property\nwith given name.\n* [ng-profile-local-digest.js](ng-profile-local-digest.js) - runs idle digest cycle starting at the scope\nthat surrounds given selector. Useful to find parts of the page with expensive watchers.\n* [ng-find-expensive-digest.js](ng-find-expensive-digest.js) builds upon ng-profile-local-digest.js to measure\ndigest duration for several selectors and print sorted table starting with the slowest digest duration.\n* [ng-monitor-digest-cycle.js](ng-monitor-digest-cycle.js) - prints a string every time a digest cycle runs.\n* [ng-count-digest-cycles.js](ng-count-digest-cycles.js) - counts number of full digest cycles (from the root scope)\nthat run when a scope method executes. Useful because sometimes you can get away with just a local digest\ncycle, rather than a full update. See [Local Angular scopes](http://glebbahmutov.com/blog/local-angular-scopes/).\n* [ng-count-digest-cycle-simple.js](ng-count-digest-cycle-simple.js) - keeps counting number of times\nthe digest cycle runs.\n* [ng-throw-error.js](ng-throw-error.js) throws an error from the digest cycle; useful for checking\nif your [exception handler](http://glebbahmutov.com/blog/catch-all-errors-in-angular-app/) is working.\n\n## Misc snippets\n\n* [github-pull-request-template.js](github-pull-request-template.js) - better GitHub pull request\ntext, based on the blog post [Enforce standards while submitting a pull request](http://krasimirtsonev.com/blog/article/enforce-standards-while-submitting-a-pull-request) by [Krasimir Tsonev](https://github.com/krasimir).\n* [remove-all-but.js](remove-all-but.js) - removes all elements in the page, except the ones in\nthe trees with specified selectors. Can be used to quickly clean up the page and leave just the essentials.\n\nAll snippets, including mine are distributed under MIT license.\n\n## Updating local code snippets\n\nYou can update local code snippets by downloading new versions from this github repository.\nCreate a new code snippet and copy the source from [update-code-snippets.js](update-code-snippets.js).\n\nNote: the approach below does not work any more,\nsee [the open issue](https://github.com/bahmutov/code-snippets/issues/23).\n\nYou will run this code snippet in an unusual way. First, open any web page, even an empty tab.\nOpen the DevTools in **undocked** mode (Command+Option+I on Mac). Then open the DevTools **again**,\n*while focused* on the first DevTools. This will open the second DevTools instance with the source for the\nfirst DevTools panels. If you inspect the `localStorage` variable in the second DevTools window, you will\nfind lots of interesting stuff, including all the code snippets in the `localStorage.scriptSnippets` property.\n\nWhenever you want to update the your local code snippets in the Chrome DevTools, execute the `update-code-snippets.js`\nsnippet in the second DevTools instance. The update script looks at the your current code snippets and\ntries to download a file with same name from the code snippets github repository (via [RawGit][RawGit]).\nIf the remote file has been downloaded successfully, it will replace the snippet.\nAfter all snippets are checked, reopen the DevTools to load the updated source code.\n\n![update code snippets](images/update-code-snippets.png)\n\nNote, that only the latest source is downloaded, not any particular release.\nAlso, only code snippets with names matching existing files in this repo are replaced. If you do not\nwant to override a code snippet - just rename it, for example, remove the `.js` extension.\n\n## Remote download a single script\n\nYou can download and run a single snippet by using the following boilerplate\n(scripts are via downloaded via [RawGit][RawGit])\n\n```js\n(function firstPaintRemote() {\n  // form rawGit proxy url\n  var ghUrl = 'bahmutov/code-snippets/master/first-paint.js';\n  var rawUrl = 'https://rawgit.com/' + ghUrl;\n  // download and run the script\n  var head = document.getElementsByTagName('head')[0];\n  var script = document.createElement('script');\n  script.type = 'text/javascript';\n  script.src = rawUrl;\n  head.appendChild(script);\n}());\n```\n\n![remote](https://raw.githubusercontent.com/bahmutov/code-snippets/master/first-paint-code-snippet-remote.png)\n\n### Small print\n\nAuthor: Gleb Bahmutov \u0026copy; 2014\n\n* [@bahmutov](https://twitter.com/bahmutov)\n* [glebbahmutov.com](http://glebbahmutov.com)\n* [blog](http://glebbahmutov.com/blog/)\n\nLicense: MIT - do anything with the code, but don't blame me if it does not work.\n\nSpread the word: tweet, star on github, etc.\n\nSupport: if you find any problems with this module, email / tweet /\n[open issue](https://github.com/bahmutov/code-snippets/issues?state=open) on Github\n\n[1]: http://glebbahmutov.com/blog/chrome-dev-tools-code-snippets/\n[2]: http://glebbahmutov.com/blog/performance-profiling-using-devtools-code-snippets/\n[3]: http://glebbahmutov.com/blog/improving-angular-web-app-performance-example/\n[measure]: http://glebbahmutov.com/blog/measure-space-allocation/\n[RawGit]: https://rawgit.com/\n","funding_links":[],"categories":["JavaScript","🔧 Chrome Dev Tools","Development Tools","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcode-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fcode-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcode-snippets/lists"}