All notes
Chrom

Extensions

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

TamperMonkey



// Remember to set the match in the comment head:
// @match        https://mp.weixin.qq.com/*

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

(function() {
    'use strict';
    if (location.origin!="https://mp.weixin.qq.com") 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].classList.remove("img_loading");
        images[i].src = src_;
    }
})();

Developer tools, devtools

Shortcuts

developers.google.com: chrome devtools shortcuts.

General

Action Mac Windows / Linux
Open whatever panel you used last Command+Option+I F12 or Control+Shift+I
Open the Console panel Command+Option+J Control+Shift+J
Show Settings ? or Function+F1 (wcfNote: ? will not work) ? or F1
Focus the next/prev panel Command+]/[ Control+]/[
undock, or restore to last docker position Command+Shift+D Control+Shift+D
Toggle Device Mode Command+Shift+M Control+Shift+M
Open the Command Menu Command+Shift+P Control+Shift+P
Normal reload Command+R F5 or Control+R
Hard reload Command+Shift+R Control+F5 or Control+Shift+R
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
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
Toggle the Drawer Escape Escape
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

Settings

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. medium.com: debugging react with chrome.

Hints

Find which js function is called when clicking a button

developers.google.com: 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 developers.google.com: 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:
/jquery/*\.js
/yui/*\.js

How to see session and cookies

Goto: "Application" tab - "Storage".

FAQ

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.

Extensions

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

FAQ

ERR_UNSAFE_PORT

When visiting "http://127.0.0.1:6000", chrome will do nothing except log "ERR_UNSAFE_PORT". In support.google.com:

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

askUbuntu.com.

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. [*.]gensee.com ) 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:
chrome://history/?#q=%s

To search your bookmarks, enter:
chrome://bookmarks/?#q=%s

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:http://google.com".