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.
I am referring to the save feature in the 'Sources' panel of the Chrome Dev Tools. I have been using this feature for a long time in the stable release of Chrome, but after installing the build from the developer channel, I notice that once I have saved the file the first time, Chrome no longer prompts me to save and just does it automatically after every change I make.
This is quite a pain, as I make a lot of changes experimentally in the dev tools whilst debugging which I don't wish to save, I would like Chrome to save the file only when I explicitly tell it to.
Does anyone know if there is a way to disable this automatic CSS saving?
(Apologies for no screenshot, my PrtScn key seemingly won't operate when I am in a context menu)
Update:
I have reverted to the current stable build, 27.0.1453.93, and the behaviour appears to be the same.
I am having the same problem, I can only offer workarounds: use another browser, such as Firefox, for doing tests!
Alternatively you could launch another instance of Chrome with a different profile. You could also launch a Chrome "Incognito Window", it seems to not apply the filesystem mappings.
I normally use an Incognito Window or inline styles to test changes.
Alas, I learned after reading a post by Google's dev relations person
that the automatic save cannot be disabled and it seems that's the way
it's going to stay.
html5rocks.com/en/tutorials/developertools/revolutions2013
– tommypyatt Feb 21 '14 at 14:22
While not solving the issue directly, it is a decent work around:
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css, so not saved to your project. Then when you are happy with your changes, you can manually put them in to your css.
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
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.