I'm trying to do some simple debugging on a Chrome extension. When I try to catch an event ID and show it in an alert, Chrome immediately closes the alert and the default popup window making it impossible to tell what was in the alert. For instance:
$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
alert(e.target.id);
});
To instead log this to the console, I could do:
$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
console.log(e.target.id);
});
However, if I inadvertently close the popup or have to reload the extension, then the console window I opened using "inspect popup" on the popup will also be closed. This makes for a very tedious debug process.
What is a better approach to debugging and test Chrome extensions for the default_popup?
You can debug your chrome extensions like this
go to this link
chrome://inspect/#extensions
you can see your installed extensions and you can inspect them
:)
grab the link to the extension and change url to popup window url
in my ex: I changed background.html --> popup.html
Related
On my website, an AJAX script makes a lot of requests. I would like to have the network log scroll down to the newest requests automatically without me needing to do this. How would I do this on Chrome DevTools?
There is a somewhat cumbersome solution:
Open devtools-on-devtools.
Open devtools first and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press Ctrl+Shift+i or ⌘+⌥+i on MacOS,
which will open devtools-on-devtools in a new window
Run this code in devtools-on-devtools console:
setInterval(() => {
let scr = document.querySelector("div.network-waterfall-v-scroll")
scr.scrollTop = scr.scrollHeight
}, 3000);
I am developing a Chrome DevTools extension, and I can't find how to debug a script running in the background page.
I declared a DevTools background page in manifest.json:
"devtools_page": "devtools-background.html"
That HTML page runs a script:
<script src="devtools-background.js"></script>
The script adds a panel:
chrome.devtools.panels.create('My Extension', '', 'index.html')
I can run my extension by opening DevTools on any page, and that works great, I see the panel. I can debug my panel's Elements and Scripts by opening the DevTools on the DevTools page (or going through chrome://extensions developer mode). I can even connect an external debugger from VS Code to the extension panel.
But I can't connect a debugger to the devtools-background.js from the background page. I can't use console.log or step debugging to understand what's going on in the background. The only thing I have is Errors from the chrome://extensions developer mode if an error occurs in that script. But no console or debugger.
When you click "service worker", you can find background of console log.
i had took a look to another threads about chrome and custom protocol apps, but i couldn't resolve a doubt i've got. In my web app, when you click a button it fire a new tab with an webpage (window.open(url, "_blank")). The new tab is opened with the url (annother web app with https protocol). This url fire a javascript function on load that verifies some things and then generate a custom url, for example myurl://base64code, and put it in an existing iframe in this way windows.frames['myframe'].location.href=theCustomProtocolUrl. i tried in different ways (location.replace, create a new iframe and set the url, etc) and i always have the same problem. If i refresh (ctrl f5) the page it always show the dialog or if i open the link with the developer console opened. But if i click my button and the page is opened in a new tab it doesn't work only if i refresh (ctrl+f5). This works perfectly on IE11, it launch the app directly.
Any ideas why chrome, and edge, works like this?
UPDATE: I have found the reason, is i use the protocolcheck.js (https://gist.github.com/vladimirtsyupko/cfcd332476b16683bb0b) library.
First i tried to open a protocol with the timeoutHack (it use blur event) and then, after failing, it fires the other url (in this case https) and the dialog doensn't appear. I found a bug with blur event on chrome > 85 https://bugs.chromium.org/p/chromium/issues/detail?id=1137801
Thanks in advance
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.
I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.
Thanks!
It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:
open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
or try hacking DevTools like so:
open DevTools (A) for your popup
focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)
Perhaps easier way as of today is to install chrome extension which will allow you to open preview in new tab instead of popup. There you can have the same icon to toggle to mobile. Below is the extension:
https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en