Black-boxing script option in Chrome Developer tool - google-chrome

I have an issue with the Chrome developer tool.
My version is Version 46.0.2490.71 (64-bit)
According to online tutorials, I can go to Sources tab, right-click a script file and there will be Blackbox Script option to choose.
However, I see no option in my chrome. How do I enable that option since I have no knowledge about regex?
Another problem: The scripts still got debugged even though I added them to blackbox list. Weird!!
One more thing i want to ask is how I blackbox an "unlimited" amount of VM files?

Open devtools settings (press F1 once in devtools or open from the menu)
Go to blackboxing (see image below)
Add a pattern, for example:
node_modules
angular
rxjs
It uses regex syntax in case you need something more specific.
The nice part about blackboxing library/framework scripts is that it makes it easier to see in stacktraces from where the error was triggered in your own sources.
EDIT
As other pointed out, since this answer was posted you can directly blackbox a script with a right click on the source file in devtools.
However head off to the blackboxing settings UI for more control.

There's an easier way in Chrome 60 (and possibly older):
Open the source file in Chrome dev tools (in the source tab)
Right Click the column that displays the line numbers
Select "Blackbox Script"
EDIT: As svict4 pointed out, in Chrome 64, you can also right click anywhere on the script

It seems they changed from blackbox to Ignore List.
Also press f1 in devTools and find Ignore List

Not sure if Chrome has changed too, but on Chromium Edge, the option is named "Mark as Library Code" and "Mark as my Code" to disable it. You have to right click on the code and not on the file/tab. Right clicking on Line numbers works too.

Related

Add space in the bottom of chrome dev console

Each Time I'm using this console I'm struggeling with my mouse to click on the editable line.
So two question :
Is there a way of enlarging this line so it easier to click on it ?
Is there a command to navigate to it ?
The only way to enlarge it is to create a custom theme for DevTools, enable the experiment for using custom themes, and then installing your extension. That way you can get custom CSS into the top-level DevTools scope to modify things.
You may open a bug report on the chromium issue tracker against the DevTools so the team can assess the UX to see if there is anything they should modify internally.

Is there a way to add MRU tab selection via CTRL+TAB to Google Chrome? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
This post was edited and submitted for review 11 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I haven't been able to find an extension or built-in way to get this functionality.
I have seen a couple of hacks on the web, but none that work properly. Eg this standalone application:
https://github.com/acemtp/chrome_mru
Yes, there is a perfectly working solution.
This extension Tab Thumbnails Switcher can redefine Ctrl+Tab and Ctrl+Shift+Tab to select tabs in MRU order the same way you swich between programs with Alt+Tab in Windows.
The best part is that the tab selector box is implemented natively, so it doesn't need to inject javascript on each tab for it to work. It works reliably on all tabs.
There's also a demonstrative video here: https://www.youtube.com/watch?v=2HC7_EI8db4
Another option I just found Yesterday (and until now it seems to work very well) is: AutoControl Shortcut Manager: https://www.autocontrol.app/switch-to-last-used-tab-in-chrome#MRU-tabs
Steps:
Install chrome extension: AutoControl Shortcut Manager
Install also the required exe file: Native-Component.exe (It will be prompted to be downloaded after the extension is installed. For me it didn't require admin rights. I hope it's ok ...)
Configure the extension based on the tutorial (9 steps) from the official web page: Cycle through all tabs in MRU order
Enjoy ctrl+tab behavior :)
I was able to get the chrome_mru tool working by changing the nHotKeyChar variable from 0xde to 0xc0 (from tilde ~ to tick `) and recompiling.
Then I realized this is the same thing AutoHotkey does using this script with the Recent Tabs Chrome extension.
The AutoHotkey/Recent tabs solution is suboptimal, yes, but I think it is the best we can hope for until Chrome implements this feature (if ever /sigh).
I now found a possiblity to achieve this for users working on Windows and wrote an extension:
https://chrome.google.com/webstore/detail/ctrl%2Btab-mru/ialfjajikhdldpgcfglgndennidgkhik
Complete solution for setting up Ctrl+Tab to use MRU switching on Windows:
First download an MRU extension for Chrome. After trying a few different such extensions, I recommend Ctrl+Tab MRU. It's not perfect, but it's the best one I could find.
Next, you need to bind the hotkeys for your selected extension to a key combination. Go to chrome://extensions/, scroll down to the bottom of the page, click "Keyboard shortcuts", and find the shortcuts for the extension you selected. Unfortunately, Chrome doesn't let you bind Ctrl+Tab as a keyboard shortcut, so instead choose a combo that Chrome does let you select, like Ctrl+Q for "Switch to older tab" and Ctrl+Shift+Q for "Switch to newer tab".
Now we need to set things up so that Ctrl+Tab triggers the key combination you previously set. For that you'll need AutoHotkey. If you don't already have AutoHotkey, first download and install it from its website. Then, put the following text in an AutoHotkey script in your startup folder, at %AppData%\Microsoft\Windows\Start Menu\Programs\Startup\tabswitch.ahk (e.g. in a new text file located at C:\Users\yourusername\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup and named tabswitch.ahk, with no .txt extension):
; Fix for Chrome's lack of MRU tab switching.
; Use this with a decent MRU tab switching extension, like
; https://chrome.google.com/webstore/detail/ctrl%20tab-mru/ialfjajikhdldpgcfglgndennidgkhik
; Configure it to use Ctrl-Q, or change the key below.
#IfWinActive, ahk_exe chrome.exe ; If currently using Chrome
^Tab::^q
^+Tab::^+q
#IfWinActive
This remaps Ctrl+Tab and Ctrl+Shift+Tab to Ctrl+Q and Ctrl+Shift+Q, respectively, when Chrome is the currently selected Window. This will allow you to use Ctrl+Tab to switch between tabs with MRU ordering in Chrome. Don't forget to double-click the script to run it. It should start back up automatically when you reboot your computer.
There are two features enabled by Firefox's ctrltab shortcut that Chrome doesn't yet offer:
Switch to the previously used tab
Press ctrltab and then release both
Select an open tab from a menu using the keyboard
Press ctrltab but then release just tab
Press and release tab repeatedly to select older tabs in the menu
Release ctrl to switch to the selected tab
The only Chrome extension I know of that offers a facsimile of this — without requiring the unnecessarily broad Read and change all your data on the websites you visit permission and that works with tabs into which extensions can't inject code, like Chrome Webstore pages — is QuicKey (which I wrote).
QuicKey works around Chrome's limitations by using one shortcut to open the popup menu (by default, altQ on Windows), then listening for another keypress (W, right next door) to move the selection in the menu, and then waiting for the alt keyup event to switch to the selected tab.
It has to use W instead of Q (which would be the equivalent to tab in this shortcut) because pressing that with alt down would close the popup. (The popup page doesn't see that key event at all so it can't block it.) But that does mean QuicKey can use a quick double-press of altQ (or double-click of the icon) as a shortcut to toggle to the previously used tab. It does that by timing how long the popup was open, and switching tabs if the time was less than 450ms.
If you want to use ctrltab as a shortcut for switching between recent tabs in QuicKey, there's a simple, cross-platform way to do it via Chrome devtools.
I am using tab stack as a workaround until Chrome has native MRU support (crossfingers) ;)
Tab Stack (https://chrome.google.com/webstore/detail/tab-stack/gfpdghcockbpiokcaaagmnneioeopnnb) moves the current tab to the front after a brief delay. It's very simple solution that gives you kind of MRU.
Solutions above didn't work for me. Maybe b/c of an international keyboard layout.
As an alternative I would offer using FF, in it you have to set browser.ctrlTab.previews setting to true and you have an MRU behavior.
All ctrl-tab MRU options I have seen on Chrome feel like hacks / do not work reliably.
I recommend switching to latest Opera . You basically get Chrome(ium) with a few key addings (MRU tabs, but also mouse gestures).
The setting is at opera://flags/#activation-order-tab-cycling (needs restarting the browser).
Finally there is a working one:
https://chrome.google.com/webstore/detail/clut-cycle-last-used-tabs/cobieddmkhhnbeldhncnfcgcaccmehgn?hl=en
Here's a very light and intuitive solution for tabs organizing in the most recently used order, which is supported in all major browsers (Chrome, Firefox, Opera, other Chrome-based browsers): Tab Slider. Its features are:
Works just like Alt+Tab on Windows or Cmd+Tab on Mac, but with browser tabs
Visually sorts tabs so you always see them in the MRU order (Ctrl+Tab switches to the next MRU tab)
Works with pinned tabs as well
Is customizable (however, I would advise sticking with defaults)
Try it! Hope you'll love it.
For mac users you can use this extension:
chrome extension
It has a shortcut opt+y to cycle through previous tabs. And if you want to use ctrl+tab as shortcut, you can use karabiner element tool to map the opt y shortcut to ctrl tab.
the mapping i use for karabiner is like so:
{
"from": {
"key_code": "tab",
"modifiers": {
"mandatory": [
"left_control"
]
}
},
"to": [
{
"key_code": "y",
"modifiers": [
"left_option"
]
}
],
"type": "basic"
}
Yes there is a working solution available now. I found Recent Tabs extension perfect for MRU tabs solution in chrome. You can use ctrl+Q or ctrl+~ or assign your own.
Better to use http://bahoom.com/hyperswitch as jason3w suggests
My solution:
On OSX I usually want MRU switching when I want to repeatedly switch between two chrome tabs and a code editor. (For example, trello.com and localhost:3000)
In this case, I start up chrome canary which is properly treated as a separate application by OSX, and allows for a simple alt-tabbing (like windows used to), SWEET!!
https://www.google.com/chrome/browser/canary.html
Try it out, peeps. I tried the Opera solution, but just couldn't live without some of the other features of chrome. I hope Opera continues to develop.
Is there a real working solution to add MRU tab selection via CTRL+TAB
to Google Chrome?
Yes. You need to modify Your preferences file as like here:
http://forum.ru-board.com/topic.cgi?forum=5&topic=34987&start=4680#16
(change Your sequence to Ctrl+Tab and Shift+Ctrl+Tab)
Chrome does not block it. You simply cannot assigh this combination becouse of hook.. But if You edit Preferences file, it works.
It is situated near
"C:\Users\%username%\AppData\Local\Google\Chrome\User
Data\Default\Preferences"
Just found this https://github.com/acemtp/chrome_mru
Its goal is to enable you to use CTRL+TAB in Google Chrome with the
Most Recently Used (MRU) Tab behavior (and not the default
next/previous tab).
I didn't try it so far. Hope it helps
edit reason: Stopped working.
On Mac OS, the Recent Tabs extension is somehow able to reassign Ctrl+Tab to switch between two most recently used tabs out-of-the-box!
https://chrome.google.com/webstore/detail/recent-tabs/ocllfmhjhfmogablefmibmjcodggknml
The tricky solution to achieve this on Windows is to combine Quick Tabs chrome extensions and AutoHotkey script. I've described it in details here, so here is in a nutshell:
1) Quick Tabs is an open-source, customizable extension, that allows you redefine some CSS styles and allows to setup hotkey for switching MRU tabs. Also it supports keyboard navigation (move to next/previous tab). However chrome doesn't let you bind Ctrl+Tab as a keyboard shortcut, so you need to register another one (for example Ctrl+Shift+S) and then use AutoHotkey script to "remap" Ctrl+Tab for chrome into Ctrl+Shift+S.
2) I won't put here the AutoHotkey script, you can find it here. It covers Ctrl+Tab remapping and handle all the keyboard navigation.
As a result you will see something like that when press Ctrl+Tab in active chrome window:
Arrows navigation, Esc, both Ctrl+Tab and Ctrl+Shift+Tab are working the way you expected.
Best workaround I have found on mac/linux is to install a extension that sorts the tabs in MRU order*, so that ctrl+tab works the way you'd expect it to:
https://chrome.google.com/webstore/detail/tab-slider/nobaaibkcalggmjnjhnlmmcldllpogjp
* last used tab is moved to all the way to the left

How to disable chrome extensions JS when debugging in devtools?

When I add mouse event breakpoint, devtools always jump into extension's JS.
Is there any way to point to my mouse event code directly?
The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).
If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.
If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:
If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.
I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).
I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.
open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://
If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.
On Linux:
google-chrome --user-data-dir=$(mktemp -d)
This way, all extensions will be disabled without having to manually switch off/on them.
I like to use Profiles for that.
While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.
My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.
How to create a profile: https://support.google.com/chrome/answer/2364824
Example: My debugging profile
First off you should probably review the tutorial on how to debug chrome extensions here:
http://code.google.com/chrome/extensions/tut_debugging.html
When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:
element.addEventListener("mouseover", function() {
debugger;
// some JS handler code...
});
Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.
For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)
For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.
The content script should be visible directly from the page it is loaded onto.

chrome devtools: Revisions of resources not working

In Chrome, you can edit your resources in line and Chrome will generate revisions of that resource. Here the documentation: http://code.google.com/intl/en-US/chrome/devtools/docs/elements-styles.html#persist
Sadly, it's not working here, and I don't know how to enable it. It is not possible to expand the file in the resource tab to see the revisions.
Using Chrome 15.0.874.121 on MacOS here. A colleague of mine tried the developer channel, but it's still not there. But I saw a demo of it at the Google Developer Day.
This works in 15.0.874.121 as well -- just double-click on a text content of a CSS or JS file in the Resources panel, type something and press Cmd+Enter. You will see the lines that you added displayed with a green background, and the edited resource on the left will become expandable.
Alternatively, the Dev channel has an "Edit" button (a pencil with dots) below the resource contents if the resource is editable. You can click it to toggle the resource editing.
It works fine on ToT and on dev channel 17.0.942.0 dev.
The scenario.
open inspector's Scripts panel
start editing with double click
save the revision with Cmd+S
optional exit from editing mode Shift-Enter
open Resource Panel
click on the right arrow symbol close to edited file.

How to remove all breakpoints in one step in Google Chrome?

How to remove all breakpoints in one step in Google Chrome? Using version 11.
[update]
There is now a feature request for this.
[update]
The feature request is closed (Dec 2011)!
This is now possible in Sources tab of Chrome Developer Tools.
Please see screen grab below and right click within the "Breakpoints" section of the left window.
Since recently (Chrome 18), you can right-click any breakpoint in the Breakpoints pane and voila! The "Remove All JavaScript Breakpoints" popup menu item!
Chrome Devtools crashed everytime I tried to access the Sources panel because of a breakpoint on a minified Javascript file.
To remove all breakpoints without access to the interface, you can do the following:
Open inspector-on-inspector : undock first inspector and hit ctrl+shift+i to open the second
On the inspector-on-inspector console, execute the following:
window.localStorage.breakpoints = [];
Close the inspectors and reload the page. Now the breakpoints are gone.
Under Sources, you can click button marked with red on picture below or use shortcut Ctrl + F8 just like tool tip is showing (activate / deactivate breakpoints). A little bit lower under 'Breakpoints' you will see all your breakpoints. If you choose to disable all, they will be grayed out.
solution here.
To purge all breakpoints open inspector on inspector (undock first
inspector and hit ctrl-shift-I to open the second) and run
"WebInspector.settings.domBreakpoints.set([])" in second inspector's
console.
new Tabs; Ctrl+Shift+J to Console; Access URL
Open the Chrome task manager and end the tab page.
Ctrl+Shift+J to Application -> Service Workers (Offiline) -> Refresh
to Sources Cancel Breakpoint
Success
Another option is to de-activate all break points using:
Ctrl + F8
In my case Uninstall and new installation of Chrome was without any success.
Also window.localStorage.clear() did not help.
My "last chance solution" is to remove entire directory where Chrome is storing its data.
First turn off your Chrome.
Then look at this path "c:\Users\ {your_user} \AppData\Local\Google\Chrome\User Data\Default\Local Storage\". Here try to delete all what is in this directory.
You can also clear all inspector settings and reload the inspector. It helped me with fantom breakpoint I could not remove in any other way. Open inspector and go to Preferences -> Sync -> Restore defaults and reload (at the bottom).
Step 1: Go to Developer tools and expand Breakpoint section
Step 2: Right click on expanded area of breakpint and there will be many options lik