How to set breakpoints on each line of code? - javascript

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.

Related

chromium browser when opening html file through command line

When I open a html file via the command line: chromium-browser "file://myhtmlfile.html", the file opens and appears correctly, however, a simple slider control on the page does not behave as expected. (It does not react to touch screen correctly.)
If I then open another tab in the same chromium window, and navigate to the same file and open it in the second tab, it behaves as expected.
When using the dev tools, I don't see any differences. The browser is not loading the file into the browser in the same manner.
Does anyone have a good explanation for this?
Thanks

Debugging a script added via Chrome Console

I am adding some JavaScripts via Chrome's devtools' console by simply just pasting a set of code. There is no way to open that code on the Sources panel so I can debug using breakpoints. Is there a proper way to open the code on the Sources panel that was added via console?
Any other ways than adding debugger; along with the code. Or a syntax error, which then shows me the file name on the right side, which opens the code in a tab in the Sources panel. Attached the two scenerios on the screenshot attached.
Open the devtool and open the Sources tab. Click on the Snippets tab on create a new snippet. Write yout code in the snippet. Then right click on the snippet created and click run !! You should be able to debug from here ;)

Quickest way to debug Chrome Extension popup scripts

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

Debugging javascript in ascx control

I am using javascript for an ascx control in my application.
I am getting some errors and want to debug the same.
I have put the debugger in my javascript and unchecked disable script debugging for internet explorer.
When my script is getting executed, I get the debugger launched, and when I attach the javascript (here it is in a separate file ), There is a message as,
There is no source code available for the current location.
What could be going wrong here.
I hope to get some tips on debugging javascript with ascx control
To debug Javacript embedded in a ascx control, you can use chrome explorer.
Here is the step.
Open the page that has the user control in it.
Press F12 on that page.
go to Sources in the "DevTools"
Find pages in the "Sources" tab
click on the page name that you are debugging.
you will see the source code in the middle pane.
your user control javascript is included in the page's source code, this is the key.
use Ctrl + F to find that javascript by the method name you want to debug
add breakpoints to that method and debug
Hope it helps.
To debug JavaScript, Hit f12 in your browser. This will open the developer tools in most browsers. (with Firefox, this assumes you've already installed firebug, which has to be installed separately as an add-on.)
Select the script tab, set your break points by clicking the margin to the left of the line of code where you want to break. If you are using IE, click "start debugging". Then perform an action on your page that will trigger your code. Happy debugging.

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