I want to see how stuff works on a website, but each time I open Devtools (or refresh the page), I get an alert saying Devtools is open. It blocked me from using Devtools, so I want to disable this feature.
So, I searched how to "jam" google chrome Devtools and got these results:
Find out whether Chrome console is open
https://coderwall.com/p/iktwug/detect-if-chrome-devtools-are-open
https://github.com/sindresorhus/devtools-detect
But I can't find any information about making Devtools Undetectable or disabling this code. Tried undocking Devtools, didn't work.
This is their code blocking me from using Devtools:
https://hastebin.com/oxopowiduy.php
What should I do to make Devtools Undetectable?
In Chrome 73+ it's possible to open devtools before the page can run any code to detect it:
open chrome://inspect
click "Pages"
click "pause" on an entry for the tab you want to debug
Now you can inspect the page, find out how exactly it detects devtools, and defuse it. Judging by the code in your question, you can run window.uomg.create.onchange = null, but if not, set breakpoints in the code and debug it to find out a working method.
Based on this answer:
Find out whether Chrome console is open
The answer to your question is "No" - the sites are probably using jscript to detect the console is open and you will not be able to send back a false negative.
Related
The Chrome GA debugger does not appear to work. I can't find any info about how to fix it either.
There is an icon on the top screen. No window on the bottom, no readout. No feedback.
Compounding the problem is that searching for 'analytics debugger does not work' returns only results about setting up analytics or problems associated with GA or Chrome.
I'm starting this thread because none currently exists.
Anyone had this issue?
Are you sure you understand what it is supposed to be doing?
I just installed it. It adds a browser action button that changes state between off and on when clicked. It also reloads the current tab when clicked, but you have to reload other tabs if you need it to take effect there.
The information that GA module outputs goes to the page's JavaScript console. The extension does not automatically open it. You can open it with Ctrl+Shift+J
I found the answer.
You have to open the Chrome javascript console. I doesn't launch automatically.
With Chrome 32.0.1700.77 the new emulator tab is handy except it's the default tab when I refresh my page.
During my standard development workflow, I constantly refresh the page when I make changes. I usually have the console window open at the bottom of the network or source views. But every single time I refresh the page, the Emulators tab takes focus and I can't see the console.
This is truly annoying since the app will fail because of a simple JavaScript typo, but I can't see the console without clicking one more time (to focus the console tab).
Has anyone found a workaround for this?
Combined with the Chrome Developer Tools unresponsive since update 32.0.1700.76 m issue, I would have to say Google really tripped up this release.
Unfortunately there doesn't seem to be a workaround yet. It looks like there has been a bug reported to Google as found on this thread, but no fix has come about yet.
I think the only way (right now) to prevent the console tab from being hidden when needed is to avoid using the emulator or revert to a previous version of Chrome.
Hopefully a fix comes soon!
It's been a while since this post was made, but I came across the same issue recently. When you have the developer toolbar open, the phone icon beside the "Elements" tab should be blue. Clicking that will disable Emulation.
source: https://groups.google.com/d/msg/google-chrome-developer-tools/g_93_bKmaiA/SdHk0aXdEo4J
Is there a way to view multiple Chrome devtools panels at the same time? A split window, like this mockup, would be nice:
Or in separate windows.
It would be extremely useful to be able to view the Sources panel and Network panel at the same time, to see exactly when network requests are fired while stepping through code.
The console can be pulled up while inside any other panel by clicking or pressing esc, so why not the other panels?
I haven't found much by searching, but maybe this is possible with a devtools extension.
Does this exist already? If not, is it possible?
I find this limitation frustrating too, all those other monitors are wasted! Here is poor man's solution:
launch your chrome with --remote-debugging-port=9999 command line parameter
right click on your page to debug and select 'Inspect Element' - this is your debug window #1
open a separate chrome window and navigate to chrome://inspect
click 'Configure...' and add localhost:9999
within a couple of seconds under 'Remote Targets' you should see tabs you can inspect from your other chrome instance
click on the tab, and now this is your debug window #2
Unrelated tip: system wide nightmode experience: http://danielsokolowski.blogspot.com/2018/11/windows-10-8-7-night-mode.html
As of Chrome Canary 33.0.1732.0, there's a "Show editor in Drawer" experiment. The editor shows up whenever you hit any anchor to the source code in DevTools.
According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.
I really like the ability to edit javascript in the chrome debugger however, I find that it can be really problematic getting the debugger to re-fetch the JavaScript from the server.
Sometimes I have to go as far just closing the debugger and reloading the frame works OK - but other times (an dI cannot pin down under what conditions this occurs) I have to clear my temporary internet cache. Sometimes I swear I have to close chrome completely, then clear the cache and then load the page before the debugger finally shows me the most up-to-date script.
(NB. There is no caching of the script by the web server)
I was wondering if anyone knew of a quick and easy way to tell the debugger to invalidate all its javascript and fetch it all anew on page reload?
While you are developing your script, try disabling the Chrome cache.
When you reload the page, the JavaScript should now get refreshed.
Chrome circa 2011
Chrome circa 2018
You can also access it on the network tab:
The context menu shown above is accessible by right clicking / presssing & holding the "reload" button, while Chrome Dev Tools is opened.
Empty cache and hard reload works best for me.
Another Advantage: This option keeps all other opened tabs and website data untouched. It only reloads and clears the current page.
You can always clear a specific file by doing the following:
Open Dev Tools
Click on the Sources tab
Find your script / image / file
Check the right panel to see if your file is up to date
If not:
Right click the resource in the left panel and choose 'Open Link in New Tab'
Force a reload of the resource with the methods above. (See #Bishoy Hanna's example)
This is very handy if you have resources that are in frames and CTRL+F5 is not force refreshing them.
Shift+F5 quickly clears the cache.
Here's a shortcut to DevTools:
F12 to open Chrome DevTools
F1 to open DevTools Settings
Check Disable cache (while DevTools is open) as shown below:
Note: Updated per Dimi's comment. They tend to move it so let me know or update the post if you notice that it's changed.
For Google chrome it is not Ctrl+F5. It's Shift+F5 to clear the current cache! It works for me !
On Windows, Ctrl+Shift+r would force reload the script in chrome.
If you are making local changes to a javascript in the Developer Tools, you need to make sure that you turn OFF those changes before reloading the page.
In the Sources tab, with your script open, right-click in your script and click the "Local Modifications" option from the context menu. That brings up the list of scripts you've saved modifications to. If you see it in that window, Developer Tools will always keep your local copy rather than refreshing it from the server. Click the "revert" button, then refresh again, and you should get the fresh copy.
It seems as the Chrome debugger loads source files into memory and wont let them go despite of browser cache updates, i.e. it has its own cache apart from the browser cache that is not in sync. At least, this is the case when working with source mapped files (I am debugging typescript sources). After successfully refreshing browser cache and validating that by browsing directly to the source file, you download the updated file, but as soon as you reopen the file in the debugger it will keep returning the old file no matter the version from the ordinary browser cache. Very anoying indeed.
I would consider this a bug in chrome. I use version Version 46.0.2490.71 m.
The only thing that helps, is restarting chrome (close down all chrome browsers).
Right click on reload button in chrome and click "Empty Cache and Hard Reload"
If the files which you are loading are cached and if the changes you have made does not reflect in the code then there are 2 ways you can deal with this
Clear the Cache as everyone told
If u want Cache and only the files have to be reloaded , you can go to network tab of the dev tool and clear whatever was loaded. next time it will not load it from cache. you will have your latest changes.
There are also 2 (quick) workarounds:
Use incognito mode wile debugging, close the window and reopen it.
Delete your browsing history
Deactivating Breakpoints caused the new script to load for me.
In my opinion it's easiest to work in a 'private browsing session' of chrome, to ensure that your javascript files don't come from the cache.
If there is document on URL:
file:///C:/Users/user/Desktop/site/index.html
Add any parameter to your URL, like this:
file:///C:/Users/user/Desktop/site/index.html?foo=777
and the browser'll refresh all sites resources
You can also use this Chrome extension to quickly switch between using or not the cache: https://chrome.google.com/webstore/detail/cache-killer/jpfbieopdmepaolggioebjmedmclkbap