Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Debugging new Chrome packaged apps

Tags:

google-chrome-extension

google-chrome-app

I'm playing with new-style packaged apps in Chrome 24, and I don't see any way to bring up Developer Tools to do debugging.

What's the recommended strategy for debugging?

like image 870
Drew Sears Avatar asked Sep 25 '12 13:09

Drew Sears

People also ask

How do I debug Chrome apps?

One needs to follow the steps below to start testing and debugging Android apps in Chrome: Step 1 – Signup for a free trial on BrowserStack App-Live on Chrome browser. Step 2 – Navigate to the App-Live Dashboard. Step 3 – Upload your test APK file or directly download the test app from PlayStore.

Can you debug a Chrome extension?

# Background scriptNavigate to the chrome extensions management page at chrome://extensions and ensure developer mode is on. Click the Load Unpacked button and select the broken extension directory. After the extension is loaded, it should have three buttons: Details, Remove and Errors in red letters.

What is a Chrome packaged app?

Chrome apps can be hosted or packaged. Hosted apps have their background web pages on a remote server and the app acts like a bookmark or shortcut; packaged apps have off-line functionality making use of local storage.

How do I debug a website in Chrome?

If you want to debug it, you should press F12 on Chrome to open the developer mode. You can see that the JS code of the current page is under the Source menu, you can set a breakpoint directly at the beginning of the script. Then you can click on the UI button or menu to start debugging(both js and backend activity ).

2 Answers

go to here

chrome://inspect/

find the page you want

like image 93
Xieranmaya Avatar answered Sep 21 '22 15:09

Xieranmaya

Starting on Chrome 24, you can right click and inspect your page or inspect the background page.

Right click on a Chrome Packaged App in Chrome 24

If your app doesn't have any open window to right click, you can go to chrome://extensions and use the Inspect Views links, from where you can open Developer Tools for any of your app pages, including those in the background.

Before Chrome 24, the only difference is that the background page could only be inspected using the chrome://extensions link, there was no "Inspect background page" in the right click menu.

UPDATE: If you want to debug an app installed from the Chrome Web Store, you need to enable the flag "Enable debugging for packed apps" in the chrome:flags page:

enter image description here

After that, right click will work on any app.

like image 38
mangini Avatar answered Sep 20 '22 15:09

mangini
Sign in to Comment

Related questions

Adding a Disable Button to Chrome Extension
Increase max popup width in a Chrome extension?
Display image on search results for chrome extension [closed]
Detect and test Chrome Extension using Puppeteer
CORS issue doesn't occur when using POSTMAN
Sending message from popup to content script - Chrome Extension
Chrome extension warns "Cannot load extension with file or directory name Thumbs.db. The filename is illegal."
Sending message from popup.js in Chrome extension to background.js
Debugging Chrome extension with access to chrome.devtools api
loading script to google chrome extension
Javascript textarea undo redo
Unchecked runtime.lastError while running storage.set: QUOTA_BYTES_PER_ITEM quota exceeded
Increasing the number of suggests shown in omnibox
Chrome extension set to `run_at` `document_start` is running too fast?
chrome.webNavigation undefined
Pack Chrome extension on server with only command-line interface
Chrome extension content scripts and iframe
How to get the currently opened tab's URL in my page action popup?
How can I enable my chrome extension in incognito mode?
chrome.commands keyboard shortcuts not working

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!