Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debugging new Chrome packaged apps

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