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.
Related
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 am trying to add the "add to Homescreen" prompt function to my website. Now I've read the google developer articles and I have everything set up.
Now, If I try to manually add my page to the homescreen with the button "Add to homecreen" in the Chrome devtools > Application > Manifest , nothing is happening. A few times the console showed an error, but after fixing it nothing happens. I don't get the Add to shelf banner, but I don't get an error displayed in the console. Lighthouse doesn't show any error either. In fact, lighthouse shows a score of 92 in pwa.
Is this now meaning that everything is working? Is there an other debug function I've overseen?
Edit: If I press the button and than reload the page, after I press reload and the page is acctually loaded, the console displays:
Site cannot be installed: the page has requested the banner prompt be cancelled
I was having this same issue: Chrome Dev Tools Add to Homescreen was not working on ANY PWA. After days struggling trying to figure out where the problem was I finally found that Chrome main menu has an option to install the app, and that option is working fine. So you don't need to use Chrome Dev Tools option.
If you are testing in localhost, try http://localhost instead of 127.0.0.1.
I don't know why, but I have the same issue when using 127.0.0.1.
After changing to localhost, it works correctly.
I tested this on multiple sites and I have the same problem everywhere. When I refresh the site in Chrome with developer tools open, the site stops and its stuck on loading. In developer tools opens the tab Sources with bundle.js file code and I get and error in console:
Cannot read property 'dataset' of null
Why is this error occurring and how can I resolve this? I tried to restart my computer but its not working. Disabling JavaScript in Chrome is not an option. I have Chrome Version 52.0.2743.116.
I have an extension that has the following files:
content.js, background.js, manifest.json, mystyles.css, jquery-2.0.3.js and icon.png.
I can set breakpoints in the content.js file via the Chrome Debug Tool via the "Sources" tab and via the "Content Scripts" tab. My problem is that I can't find a reference to the "background.js" file, so I can set a breakpoint in it. Can someone tell me what I am overlooking or doing wrong?
References:
I have watched the Chrome Debug Video on YouTube.
I have read the Chrome Tutorial on Debugging.
If you open up a new tab and go to chrome://extensions, you will see a list of installed plugins, including your own. Next to your plugin, there will be a link to "Inspect Views" pointing to a background.html page or a generated one in your case. This will launch a new debug window in Chrome that will allow you to browse to your background.js file and set breakpoints (by clicking on the line number)!
Whenever I'm developing in Chrome, I don't have issues until I try executing scripts while the Chrome Developer Toolbar is open. When it's open, and (for instance), I click on an element with an event tied to it, the toolbar will flip over to the Scripts tab and show what I've attached below.
When I close the toolbar, it seems that the execution of the script picks up and runs the actions I was waiting for.
I should note that there are no errors in my JS and when the toolbar is closed it runs perfectly. There must be something in the Chrome settings that pauses javascript execution while the toolbar is open.
I've disabled all extensions and restarted the browser to no effect.