Quickest way to debug Chrome Extension popup scripts - javascript

I have the Chrome Apps and Extensions developer tool installed to debug my Chrome Extension. However, to debug the popup script running in the popup window, you have to perform the following steps:
Refresh the Chrome Extension on the Extensions page
Right click the icon next to the url bar
Select "Inspect Popup"
Set breakpoints
The real annoying part about this is the popup window has to be re-opened every time a change happens. Debugging background scripts I don't have as much of a problem with, because the background script debug page stays open after you refresh the chrome extension. But for popup scripts, the popup window along with the popup debug page keeps closing and it becomes a really tedious, repetitive task to re-open it when debugging a lot. Is there no other way to more easily start debugging Chrome Extensions popup scripts?

As i understood you have a pop up while tapping the icon in the URL bar
In order to debug you can use weinre remote debugger ,Which may solve your problem
apache weinre

Related

How to remove breakpoints causing Chrome to hang

Is it possible to delete all breakpoints without opening Chrome devtools?
I have a breakpoint set in a large obfuscated javascript file that cause the current tab to hang if I have devtools open while the page loads. I have no problems if i let the page load, and then open the devtools, but then the script is not visible in the sources and network panels.
I have attempted to disable breakpoints by immediately activating the "Deactivate all breakpoints" button when the page loads, but the breakpoint still triggers causing the tab to hang.
Update: This problem only happens when the sources panel in the devtools is open during page load.
As #Andrey points out, when the dev tools are closed Chrome will never break on a breakpoint.
You can disable breakpoints using Ctrl + F8, hitting F8 afterwards will continue from the current breakpoint.
You can also view a summary of all active BP's in the right of dev tools.
Update:
A last resort option is to clear the dev tools settings as follows. Note this will clear reset any customized settings you have...
Settings > Restore defaults and reload
I finally managed to reset the devtools, including all breakpoints, by simply logging out of chrome and back in again.

How to set breakpoints on each line of code?

I want to inspect how one of my chrome extensions works. I've opened its code in Chrome and would like to see which functions are called after extension starts.
How can I set breakpoints on each line of code or debug the whole code?
Open the Devtools Sources panel. Open the Content scripts tab, and browse to the extension script you want to debug.

How can I debug JavaScript with PhpStorm without loading a new tab each time?

I'm all setup to debug JavaScript in PhpStorm, however, clicking the 'Debug' button in PhpStorm each time stinks. Is there anyway, maybe a Chrome extension, that I can use to enable debugging with from within the browser? (Just like you would while Xdebug debugging with the Chrome Xdebug helper?)
For example.. I'm working on a large project and need to debug site.com/some/thing/here, PhpStorm JavaScript debugging is setup for my site url (site.com), I have to click 'Debug' in PhpStorm, and a new Chrome tab opens to site.com. I then need to navigate to the page in question before my breakpoint will trigger; and I end up with a ton of tabs in Chrome. That workflow stinks :(
I'd much rather stay in one tab, navigate to the page in question, enable 'debugging mode', set my breakpoint in PhpStorm, and do a JS action or refresh the page to start debugging (just as you would with Xdebug).
I use the Chrome step-through debugger a lot, but I really want to move to using PhpStorm so I'm able to set breakpoints and edit my code in the same place / with the same workflow I use to debug PHP.
Any ideas? Suggestions? Thank you!!
In the URL box, just enter the URL of the page you're debugging (e.g. http://example.com/some/thing/here)
When you click the debug button it will navigate to that page. You can then just refresh the same page

How do I refresh the JavaScript in the primary content pane in IE developer tools when debugging?

I'm in the middle of writing/testing JavaScript code.
I'm using IE9 Developer Tools to debug the JavaScript. When I make a change to the code, refresh the page (Ctrl+F5), and click "Stop Debugging", the JavaScript in the primary content pane is updated. However, when I click "Start Debugging" to test the new code, the content pane reverts to the previous code.
I've tried clearing the browser cache, but this does not resolve the problem.
The only way I can resolve this right now is by restarting the browser, but that is not acceptable, as I shouldn't have to shut down the browser, and then login to the website again just to test changing one line of code.

How can I debug Javascript errors while writing Chrome extensions?

How can I see javascript error when loading chrome extensions? I've tried using developer tools but I don't see any errors there. Also if I use console.log, I don't see any output in the console.
Anyone have any ideas?
http://code.google.com/chrome/extensions/tut_debugging.html
Go to the Extensions page (chrome://extensions), and make sure Developer mode is still enabled. The Extensions page doesn't need to be open for the following to work. The browser remembers the setting, even when the page isn't shown.
Right-click the extension's icon and choose the Inspect popup menu item. The popup appears, and a Developer Tools window like the following should display the code for popup.html.
The above answer doesn't work anymore. Sadly the Inspect Popup menu item has been removed from Chrome.
But this answer works:
Debug popup.html of a Chrome Extension?
(More precisely: the second comment of the first answer on the above page helps).

Categories

Resources