In IE I can set breakpoints and debug just fine.
In Chrome I'm able to view the script but I have no options to set a breakpoint in the code, nor is there a "scripts" tab to navigate to for debugging. I'm confused. (Restarted chrome multiple times). I tried also setting a "debugger;" flag in the code, but that didn't work in Chrome.
What I've found that works is the following (in Chrome 21.0.1180.79):
Open the dev tools (ctrl+shift+i), then click the "Sources" tab. Notice the small right pointing arrow in the grey bar, if you click this, it'll show all the .js files loaded.
Here's the trick. Refresh the page (F5) and now all the inline script is available in this section, so you can set breakpoints at your pleasure :)
Add a #sourceUrl comment to your script. Chrome will then list the script in the Scripts / Sources tab in the Chrome DevTools.
There is a pretty good writeup about #sourceUrl on HTML5Rocks: http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl
Even though the comment is called #source*Url*, you can put anything you want as a Url. It just needs to be a human-readable string which you'll use to find your script in the list of scripts.
Related
Feel really stupid for asking but where did the file tabs in the debugger go? I can only open one file at a time. If I try to open another one, the file content is simply replaced with the new file. If I revert back to the old debugger, then I have a file tab for each file I open.
Using Firefox 53.0.3 (64-bit) on Ubunto 16.04LTS
You're actually using the old debugger UI. It's the new frontend that allows to open several files at the same time and looks like this:
To toggle the new debugger UI, go to about:config and set the preference devtools.debugger.new-debugger-frontend to true.
You may also check whether browser.tabs.remote.autostart.2 is set to true, which controls whether Firefox runs in multi-process mode.
I read an answer to a question on SO and someone suggested writing directly into the console. I thought, that sounds cool let's give it a go. I proceeded to make an attempt, but I couldn't figure it out. How do I write/run code directly in the console? I tried in Firebug & Firefox's inspector and I did a little Google search as well. Did I misunderstand something?
Firebug has two ways to execute some code (and write to the console). These are the Command Line at the bottom of the Console panel:
and the Command Editor if you want to write some larger scripts:
which is available by clicking the little arrow at the right side of the Console panel:
The Firefox DevTools have a similar feature to the Command Editor of Firebug called Scratchpad:
This tool is available via the Firefox menu > Developer > Scratchpad or by pressing Shift+F4.
MDN has some example about Outputting text to the console.
The most simple example is:
console.log("Hello World!"); Which should show up in the Firefox Console. (There might be some issue if you use Firebug at the same time)
I am developing a Chrome extension. It sets/reads local storage, reads the DOM, and sends an Ajax message. But sometimes it never reaches the server and I don't know where it gets stuck. Reloading the page doesn't work, although the extension works if I load another page in the same tab, and the original page will work if I load it in another tab. I use activeTab permission.
How can I debug this? The Chrome tutorial http://developer.chrome.com/extensions/tut_debugging.html only mentions a popup, which I do not have. (I right-click the icon and "Inspect popup" is not visible.)
I have tried plain old F12/sources, but I don't see my extension there, even when it works.
I am on localhost and the extension is not packaged. I am still working in developer mode.
The extension does not show up in developer tools>Sources>Content scripts, maybe because it isn't packaged. I can see the content script from another regular extension.
To see mine I:
Wrote the following as the first line in my script:
debugger;
Before pressing the extension icon, I bring up the developer tools: F12
Now, when I click the extension icon, my script opens under sources/program. It does not do this if the developer tools is not open.
As we know Scriptish has the support for the chrome: scheme (although disabled by default), but it failed to inject a user script into other chrome: window (for example, download window, or about window).
Writing a script using #include chrome://foo/bar only works when the browser window opens this page as a tab, but not for a new window with this URL, except the browser window itself, use #include chrome://browser/content/browser.xul does work.
Is there any way to let Scriptish do this just like what uc does? Or is Scriptish just designed like this?
I have resolved it.
Scriptish will insert a toolbar button to browser windows. And every time it wants to inject a script, it checks if the target is alive and if it has Scriptish's UI, if not, it just return.
As a result, although it supports chrome scheme, it only inject scripts into browser windows and chrome page in tabs.
I edited modules\utils\Scriptish_injectScripts.js, removed this check at line 29, now it can inject scripts as their #include meta data.
I am following the instructions here to make my development environment for firefox:
https://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/
and everything is working great.
On the page as you can see there is one instruction:
Point your Firefox extensions directory to your extension
Instead of constantly preparing and
reinstalling your extension, there’s a
simple way to add a pointer from your
Firefox extensions directory to your
code location. To do this, you must
first find your profile directory: ...
And that too is working great!
My question is:
When I make changes to the JS file in the dev directory, do I have to keep restarting FF for the changes to take effect? Because when I create an extension in Chrome there is a simple link that says "reload" and clicking that reloads the extension without me needing to restart the browser... does any such functionality exist for FF?
Thanks!
R
Extension Developer extension has an option to reload chrome. Doing that should reload your extension without restarting Firefox.
It really depends on the JavaScript files. XPCOM components and JavaScript modules load only once, there you unavoidably need to restart when you change them. JavaScript files loaded via <script> tags are only valid for the window that loaded them - opening a new window will do to load a fresh copy of the script. All that will only work correctly if -purgecaches command line option is specified as other people noted already.