All notes


Shortcuts. You can see and modify all chrome shortcuts in the bottom of extension page.

Tab position options

Alt + t Sort tab (title)
Alt + u Sort tab (url)
Alt + c = Switch between current and last active tab


// Remember to set the match in the comment head:
// @match*

// And in the settings for this script, set "Run at" to be "document-idle".

(function() {
    'use strict';
    if (location.origin!="") return;
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; ++i) {
        var src_ = images[i].getAttribute('data-src');
        if (!src_) continue;
        images[i].src = src_;

Developer tools, devtools

Shortcuts chrome devtools shortcuts.


Action Mac Windows / Linux
Open whatever panel you used last Command+Option+I F12 or Control+Shift+I
undock, or restore to last docker position Command+Shift+D Control+Shift+D
Toggle Device Mode Command+Shift+M Control+Shift+M
Focus the next/prev panel Command+]/[ Control+]/[
Toggle the Drawer Escape Escape
Open the Command Menu Command+Shift+P Control+Shift+P
Open the Console panel Command+Option+J Control+Shift+J
Show Settings ? or Function+F1 (wcfNote: ? will not work) ? or F1
Normal reload Command+R F5 or Control+R
Hard reload Command+Shift+R Control+F5 or Control+Shift+R
Open a file in the Sources panel Command+O or Command+P Control+O or Control+P
Toggle Inspect Element Mode Command+Shift+C Control+Shift+C
Opens the Search tab in the Drawer, which lets you search for text across all loaded resources Command+Option+F (wcfNote: it's Option, not Shift) Control+Shift+F
Run snippet Press Command+O to open the Command Menu, type ! followed by the name of the script, then press Enter Press Control+O to open the Command Menu, type ! followed by the name of the script, then press Enter

Bypass your cache on all browsers

wikipedia: bypass your cache.
In most Windows and Linux browsers:
Hold down Ctrl and press F5.

In Apple Safari:
Hold down ⇧ Shift and click the Reload toolbar button.

In Chrome and Firefox for Mac:
Hold down both ⌘ Cmd+⇧ Shift and press R.

Console panel

Action Mac Windows / Linux
Accept autocomplete suggestion Right Arrow or Tab Right Arrow or Tab
Reject autocomplete suggestion Escape Escape
Get previous/next statement Up/Down Arrow Up/Down Arrow
Focus the Console Control+` Control+`
Clear the Console Command+K or Option+L Control+L
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary Command+Return Shift+Enter
Expand all sub-properties of an object that's been logged to the Console Hold Alt then click Expand Hold Alt then click Expand

Elements Panel

  Hide current element

F2 (windows)
  Toggle Edit as HTML mode

Sources panel

Command + \
  Pause script execution

Command + '
  Step over

Command + ;
  Step Into

COmmand + Shift + ;
  Step Out

Control + ./,
  Select the call frame

Control + G
  Go to line

Command + O
  Open Command Menu

Command Menu



Enable javascript source maps

Back to "Settings", in the "Preferences" tab under the header of "Sources" there’s a convenient "Enable JavaScript source maps" checkbox. Enable it. debugging react with chrome.


Find which js function is called when clicking a button breakpoints.

SO: find out what functions are called when a button is pressed.

Use "Event listener breakpoints":

1. Click the Sources tab.
2. Expand the Event Listener Breakpoints pane.
3. Choose the events to attach breakpoints.

Skipping framework js files

You can blackbox a script by right clicking on its content. See chrome devtools for "Blackbox a script".

You can blackbox by inputting file pattern:

You can skip any js file from being traced by opening developer tools (f12), hitting f1 (settings), clicking the Blackboxing menu item from left side, and entering the name of the file you want to skip:

How to see session and cookies

Goto: "Application" tab - "Storage".

How to debug post requests

Add to filter: "method:POST". Turn on "Preserve log".


What is the [VM] js files

SO: devtool vm files.

[VM] (scriptId) has no special meaning. It's a dummy name to help us to distinguish code which are not directly tied to a file name, such as code created using eval and friends.

When using eval, the javascript gets thrown into the Chrome Debugger VMs. In order to view js created with eval under Chrome Debugger Sources, set this attribute at the end (thanks Splaktar) of the js:

//# sourceURL=dynamicScript.js
// Or (deprecated)
//@ sourceURL=dynamicScript.js

Error from extensions

For example "chrome-extension://fjccjnfkdkdmjohojoggodkigkjkkjhl/contentscript.js", click and open the "contentscript.js", right click on its tab bar, click "Reveal in navigator", then you will find which extension the "contentscript.js" comes from.

Devtools mobile

HTTP 404

SO: google devtools returns http404.

This is because the remote browser was newer than the client browser.
Go to chrome://inspect/#devices on the PC. You should see the name of the app and an "inspect fallback" link.


Rearrange Tabs

Allows users to rearrange tabs using keyboard shortcuts

To move selected tab(s) left
Mac: Ctrl+Shift+Left
Windows: Shift+Alt+Left

To move selected tab(s) right
Mac: Ctrl+Shift+Right
Windows: Shift+Alt+Right

To move selected tab(s) to the front (leftmost position)
Mac: Ctrl+Shift+Down
Windows: Shift+Alt+Down



Type in Chrome: "about:flags" and search for "Desktop PWA". Change the dropdown to Enabled and restart Chrome.


Click on the top-right menu icon in Chrome and you will find an option "Install twitter app"

go to Apps in Chrome and look for the Twitter icon. Right click it and select Open as Window. This will make the Twitter PWA open in its own window.

go to Settings & Privacy > Notifications > Push Notifications. Upon enabling this option, Chrome might ask your permission. Click Allow to ensure that you receive notifications.



When visiting "", chrome will do nothing except log "ERR_UNSAFE_PORT". In

Chrome is blocking most of the lower ports and many ports of "known" services.  With 65535 ports to choose from, there's plenty of secret, non-standard ports to use for your services that are not blocked by Chrome.

So the solution is, don't use those unsafe ports such as "6000". Use "65000" instead, for example.

Find the CPU intensive tab

Pressing Shift + Esc on Windows or Linux, will bring up the Chrome "Task Manager" with a row for each tab - you can sort by Memory, CPU and a couple of other columns.

On Mac OS X, you can find it under the "Window" menu.

Flash support

Type "chrome://settings/content" (Mac OS) or "about://settings", search for "flash", add the website (e.g. [*.] ) to allowed URLs.

Search bookmarks

Open Settings in Chrome and click "Manage search engines." From there, enter the name of the search and the keyword you want to use to trigger it and enter one of the following two URLs:

To search history, enter:

To search your bookmarks, enter:

To use these custom searches, enter your keyboard (or letter) in the Omnibox and hit Tab. cnet.

Click inside the OmniBar and type in the keyword you set for the search engine, hit Tab when the prompt appears and then enter what you want to search for. The search results open in a new tab in the Bookmarks manager.

View source on chrome mobile

In Firefox or Chrome on Android it's possible to view source by prefixing the URL in the address bar with "view-source:", i.e. "view-source:".