Much of Firefox is implemented as javascript modules in javascript in files like: resource://gre/modules/AddonManager.jsm How can you get a javascript debugger to set breakpoints in this code as the Firefox starts up?
(Most Firefox documentation and web searches refer to javascript debugging for the 'end user' web page scripts, not the internal scripts)
On Firefox 19 or later, it's possible to use the built-in JS debugger
on the browser itself. Go to about:config and set the following two
prefs:
devtools.chrome.enabled: true,
devtools.debugger.remote-enabled: true
After you restart the browser, you can access the Browser Debugger
through Tools > Web Developer > Browser Toolbox. (Note that before
Firefox 28, this was labeled "Browser Debugger" and only the debugger
was available, not the whole toolbox.)
https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript
Related
I have FF (v.35), Opera (v.12), and IE (v.11) installed on my Win 7 x64 PC and wanted to debug a (locally stored) HTML file that loads a JS script.
After adding the file to a new project, I went to File > Settings > Tools > Web Browsers and unticked the web browsers that I do not have installed.
So those settings now looks like this:
After that I went to "Edit Configurations" and added the HTML file that I wanted to debug, as shown below:
(note that the HTML file is not empty, even though it is named that way)
Now if I click on the 'Debug (default)' button, I get these messages that Windows has a problem finding chrome and WebStorm is waiting for a connection from the Chrome plugin:
On another hand, if I click on the 'Run (default)' button it opens the page in Firefox as expected.
I am either doing something wrong or have something misconfigured.
How can I tell WebStorm not to use Chrome for debugging?
Thanks,
Simply put, JetBrains WebStorm does not support the JavaScript Debug configuration in any browser other than Chrome (or other Chrome-based browser such as Dartium).
To debug in FireFox versions 33-35 (for WebStorm v.10 this does not work in FF v.36), you have to enable Remote debugging in Firefox and then use the Firefox Remote run configuration, as explained here: https://youtrack.jetbrains.com/issue/WEB-13801#comment=27-904044.
ATM run/debug configuration of "JavaScript Debug" type only supports Chrome.
https://youtrack.jetbrains.com/issue/WEB-14987 -- watch this ticket (star/vote/comment) to get notified on progress (currently planned for WebStorm v11).
To debug using Firefox you have to use "Firefox Remote" type of configuration instead (for additional stuff /issues -- see related tickets).
I've created an addon using the addon SDK and installed it in Firefox (version 35.0.1). The addon has the following files -
data/login.js (content script file)
lib/main.js (main addon code)
test/test-main.js (auto-generated)
package.json
In the main addon code I'm creating a panel, and the content script file is loaded using the contentScriptFile property of the panel. However when I launch the addon debugger, I'm able to see only the main.js script and not the content script. I've checked that the xpi file actually contains the content script file. So why isn't the debugger showing it?
I think I found it (using Firefox Developer Edition 42.0a2 though).
Open the Default Web developer Tools (Ctrl+shift+I)
Go to Settings (cog wheel top right)
Enable "Advanced Settings" > "Enable worker debugging (in development)"
Enable "Inspector" > "Show Browser styles" (for seeing your content style (files))
Reload the page
Try using the browser toolbox or the browser content toolbox which is not scoped to a single addon.
Afaik the addon debugger only shows scripts running in the same compartment as the addon main, which may miss scripts running in sandboxes/other compartments.
Its probably an error in your content script code that prevents the file from appearing in the debugger file list. I had this problem and it's difficult to find these errors as the Firefox error log often doesn't refer to the which file is in error or the line number. Check for unpaired braces that kind of thing
I have the Marionette/Require TodoMVC sample imported into Eclipse (Aptana V3) and have breakpoints set, but they never hit.
The non-Marionette/Require version debugs just fine.
I assume this has to do with how things are modularized with Require.js? Anything I can do so I can debug and not have to go back to console.log?
Thanks!
You can also use Backbone Eye (http://dhruvaray.github.io/spa-eye/)!
[Disclaimer : I am the author]
You need to debug the client code from the browser like firebug if running client in Firefox. Or Chrome Dev tool if Chrome is used.
Here are the steps:
From Eclipse, right click the 'index.html' file
Goto Run-As menu --> Select JavaScript Web Application
It will launch Web Browser and load the index.html file and Aptana internal server will be running without you doing anything.
Browser setting is"Preferences/General/Web Browser"
Then you can follow the firebug to debug if using Firefox and to set breakpoints.
I have recently known that Firefox has a Browser Console (different than Web Console) which can be enabled setting devtools.chrome.enabled to true.
I have searched information about what can I do with it, but I have only found
The Browser Console lets you see all JavaScript errors and logging in
the browser, including from Firefox code. To enable it, go to
about:config in the url bar and set devtools.chrome.enabled to true.
Activate it through with the menu Web Developer > Browser Console.
(https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#Browser_Console)
I have discovered that Browser console is useful because I can see the errors in sandboxed GreaseMonkey scripts. But I guess it can do lots of interesting things, where can I find some info?
This MDN page says it all (when I asked this question that page didn't exist, it was created the Aug 7, 2013 5:04:27 PM)
Browser Console
The Browser Console is like the Web Console, but applied to the whole
browser rather than a single content tab.
So it logs the same sorts of information as the Web Console - network
requests, JavaScript, CSS, and security errors and warnings, and
messages explicitly logged by JavaScript code. However, rather than
logging this information for a single content tab, it logs information
for all content tabs, for add-ons, and for the browser's own code.
Similarly, you can execute JavaScript expressions using the Browser
Console. But while the Web Console executes code in the page window
scope, the Browser Console executes them in the scope of the browser's
chrome window. This means you can interact with all the browser's tabs
using the gBrowser global, and even with the XUL used to specify the
browser's user interface.
To open the Browser Console, select "Browser Console" from the Web
Developer submenu in the Firefox Menu (or Tools menu if you display
the menu bar or are on Mac OS X):
You can see that the Browser Console looks and behaves very much like
the Web Console:
most of the window is occupied by a pane that display messages
at the top, a toolbar enables you to filter the messages that appear
at the bottom, a command line interpreter enables you to evaluate JavaScript expressions.
Browser Console logging
The Browser console logs the same sorts of messages as the Web
Console:
HTTP requests
Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using
the console API)
Input/output messages: commands send to the browser via the command line, and the result of executing them.
However, it displays such messages from:
web content hosted by all browser tabs
the browser's own code
add-ons.
Messages from add-ons
The Browser Console displays messages
logged by all Firefox add-ons.
For example, here's a very simple Add-on SDK add-on that just
logs an error when the user clicks an icon:
// base-64 encoded icon, from http://edmerritt.com/'s "Vaga" icon set
var icon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9" +
"hAAAC90lEQVR4Xk1STUgbWxQ+mbmZNGqcJGjaGBq7UUGpYCEUXMSFLgRBdKeIG6F06aKUt6irEks" +
"R3JjWGAquSjeW8p6g3UQeCPKeJvCgRYP4QxK0TaPPGJPMZMzM3J4bM9ED35x7z/nOud+9c0yKooBh" +
"h6FQV1lRZmRZ9l8riksplQjhedVssWQQm4SQwOMXL3YNviAIwBmb/WDwVT6X+1snZMz18GFLe3s7e" +
"dLdDR2dncTl9bZQjhvD/D//zc+/gTtGjGJJkv5wtrTYHLIMaioFFL2sqgA8D3VWK9gcDjhvbLRlUq" +
"mX38LhB93Pn08BGnewuNhVyOennW63zX5xAdfJJKiXl6Di1ewTExWvZrNQwriYz4PT4yH/Hx9PHm5" +
"s3DRQ8M5CQ0OzXZKgnMmAjqfqmBBHRqC+pwcco6OgUQoaxhXMO3QdiMVCsvH462Qy2UxKkuTHO4N2" +
"clIh6UimABVA1bOYztaYB1TpvH8fThMJj1vTholcLLqsHAeqJN0Wo9dwz0wtFkFjC6MRxus9Hrj68" +
"QM0TRsgiiQRARtI2J0yQpVYzuVuGqA3VFCGchnqzGaQrq5A13Uf4fE/lzSNUJ4HDZMGObu1xXArv6" +
"rOhDy5VALzvXtMQSvHC0Imz4YJA4ysVQvE3l7oCAaZZ/EaTPhLc4UC1DU1sQZJTsAJO0+ngXM6Qef" +
"5mgKusRGY8aJYK2YqCfLSiQSIbW3sClGOx/EsZLP5M10Hs8sFOsdVyL/W1yERCkF6ba1WLGD+Fz6q" +
"xObh6VOmIML5ZmZ26x2Odz+PjtRzfBzB6wXebgeTIEBubw/AYgEz7q2PHsE5HnK6vw/uvj7gRPEvV" +
"LAKOEgVbL59u/zl2bPy2vQ03Z6bo7vBID0Ih+n3hQW6NTtLMUc/jo/TjaUlGovFtqPRaD97WFZcQ2" +
"xlZSoSCJx8RvLy0BB97/fTD4OD9NPkJP0aCNB/IxGKhX/u7Oz0Mz5rYGKfuxaPx5tR2jBiAHM+9K2" +
"IJK6jiAhi1efznRn837fI5BVWw7NCAAAAAElFTkSuQmCC";
widget = require("sdk/widget").Widget({
id: "an-error-happened",
label: "Error!",
contentURL: icon,
onClick: logError
});
function logError() {
console.error("something went wrong!");
}
If you build this as an XPI file, then open the Browser Console,
then open the XPI file in Firefox and install it, you'll see an icon
in the Add-on bar:
Click the icon. You'll see output like this in the Browser Console:
For Add-on SDK-based add-ons only, the message is prefixed with the
name of the add-on ("log-error"), making it easy to find all messages
from this add-on using the "Filter output" search box. By
default, only error messages are logged to the console, although you
can change this in the browser's preferences.
Browser Console command line
Like the Web Console, the command line interpreter enables you to
evaluate JavaScript expressions in real time:
Also like the Web Console's command line interpreter, this command
line supports autocomplete, history, and various keyboard shortcuts
and helper commands. If the result of a command is an object, you can click on the object to see its details.
But while the Web Console executes code in the scope of the content
window it's attached to, the browser console executes code in the
scope of the chrome window of the browser. You can confirm this by
evaluating window:
This means you can control the browser: opening, closing tabs and
windows and changing the content that they host, and modify the
browser's UI by creating, changing and removing XUL elements.
Controlling the browser
The command line interpreter gets access to the tabbrowser object,
through the gBrowser global, and that enables you to control the
browser through the command line. Try running this code in the Browser
Console's command line (remember that to send multiple lines to the
Browser Console, use Shift+Enter):
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
It adds a listener to the currently selected tab's load event that
will eat the new page, then loads a new page.
Modifying the browser UI
Since the global window object is the browser's chrome window, you can
also modify the browser's user interface. On Windows, the following
code will add a new item to the browser's main menu:
var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);
On OS X, this similar code will add a new item to the "Tools" menu:
var parent = window.document.getElementById("menu_ToolsPopup");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);
I understand that I can log to the console when using a Firefox extension with the cfx run command.
Is there a way to log to a console after the extension has been packaged with cfx xpi? Logging to Firebug is fine if possible.
I have found two blog posts about this (here and here). Both are rather old and don't work any more.
I'm using version 1.10 of the add-on SDK and FF15.
You need to do 2 things:
enable logging for addons
• in about:config, add a new option extensions.sdk.console.logLevel and give it the value "all"
• restart Firefox
in Firefox open the Browser Console:
• Tools -> Web developer -> Browser console
• NOTE: this is different from the usual Web Console used to debug web pages
You should see addons logs there now.
TLDR:
Go to about:config url and create key extensions.sdk.console.logLevel with value all
See log messages either in Browser console (Ctrl+Shift+J) or in terminal you started Firefox from.
cfx or its successor jpm creates this configuration key automatically in development firefox profile.
From logging documentation:
extensions.sdk.console.logLevel: if set, this determines the logging level for all installed SDK-based add-ons.
extensions.extensionID.sdk.console.logLevel, where extensionID is an add-on's Program ID. If set, this determines the logging level for
the specified add-on. This overrides the global preference if both
preferences are set.
I will summarize recent changes that has taken with Firefox since this question got posted -- basically updated #LucaBonavita answer.
In about:config, check if option extensions.sdk.console.logLevel is enabled. If not, toggle to enable. You might need to create it if it does not exist
Open Browser Console
Menu Bar -> Tools -> Browser Tools -> Browser Console
Enable Show Content Messages in browser console.
Now, console.log triggered by Firefox addon/extension should display
Tested on Firefox 94.0.2 (64-bit) and 95.0b12 (64-bit)
Have you tried console.log() with Firebug? (I know you have tried Application.console.log() and Firebug.console.log() already)
I just tried it in the Web Console on FF16 running Firebug 1.10.4 and it seems to work:
Here are some more examples from the Firebug Wiki itself: FirebugWiki Console API
Additionally, you can write messages of different types in the console, such as: console.debug(), console.info(), console.warn(), console.error()
If you run console.log from Add-on code, it send up in the 'Messages' tab of the Error Console window: