I'm trying to use Firebug to debug a JavaScript file in an extension I've added to Fx 4.
Can anyone tell me how to do it? I can only see website scripts.
Use Chromebug it's firebug for extension development, witch will give you the full ability to inspect debug firefox it self and all firefox extension as if it's a webpage :)
1- install the latest version from here: http://getfirebug.com/releases/chromebug/
2- Winkey+R to open run then type firefox.exe -chromebug this will run firefox with chromebug
3- for more information visit http://getfirebug.com/wiki/index.php/Chromebug
Please see MDN - Building An Extension - Debugging Extensions, which shows what tools Firefox provides you with to natively debug extension, also take a look at Dive Into Greasemonkey - Debugging User Scripts (PDF, p.13) which is aimed more specifically at your request.
Other than that, see How to debug a Greasemonkey script with the Firebug extension?
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 you must accept the incoming connection)
See more at: https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript#JavaScript_Debugger
In the bottom right hand corner there should be a little Firebug icon. Single or double click to open then you see some tabs at the top. Click the "Console" tab for real time debugging, or the "SCript" tab to view the scripts that have been loaded. Note, you can also load CSS and HTML through Firebug, use the "Viewer" icon to view HTML code on the page in real time.
Related
Well, I am a developer and I recently found that whatever I have written code is been exposed in the google dev tools on pages tab under the source tab. So, what do I do to hide the code?
Here is the problem...
Is it possible to block the loading of a specified script (e.g. jquery) in Firefox and Chrome?
If not, is there an addon that can do this?
Go in Chrome Dev Tools -> Network and select JS then reload the page. You'll see all the scripts, you can right click on a script to block it.
It's the same process in Firefox. Firefox Dev tools -> Network and select JS to find all scripts.
Now that Firebug has been subsumed into Firefox, how can I configure the browser to bring Javascript errors to my attention without having the console open all the time, as Firebug used to do by showing an error count on its toolbar icon?
The Firefox DevTools provide a so-called "Developer Toolbar" aka GCLI (openable via Firefox menu > Developer > Developer Toolbar or Shift + F2), which displays the number of errors on the page (besides providing many useful commands):
Update:
The DevTools team obviously plans to remove the Developer Toolbar, because of low usage and because it's unmaintained and for most of it's features are available somewhere else.
There is no replacement yet for the error count, though, but a comment on the related bug report indicates that it will be added back.
Another options is to use Chrome extension JavaScript Errors Notifier.
To install it in Firefox, you'll first have to install another extension Chrome Store Foxified, which enables you to install any Chrome extension from Chrome Web Store to Firefox. You can follow the instructions of Chrome Store Foxified to install the extensions you like. (Note that not all Chrome extensions will work in Firefox.)
If you want to install the Chrome extension permanently, you'll have to sign up with Mozilla to get the extension signed.
If the JavaScript Errors Notifier extension is successfully installed in Firefox, you'll see an icon appearing at the right end of the address bar.
And when there's any JavaScript error in the page, the icon will turn red. To see the details of the errors, you can click on the icon. And the extension have quite some options to tune the errors that you want to get alerted.
I am creating a purely browser based app - HTML and JavaScript.
I do not have an Android IDE installed (nor one for iOS) - and would prefer not to have to install one and perform remote debugging.
Developing on my PC, I use the Chrome browser and the developer tools to view the JavaScript console in order to debug.
How can I do that on an Android tablet (or, later, iOS)? I prefer a purely browser based solution, but could accept an Android/iOS based app.
Try https://github.com/liriliri/eruda
All you need to do is add this snippet on top of the page:
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
And you get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:
Just released for iOS, Chrome 73 now supports the option to see console.log.
If you’re a website developer, you can now view JavaScript console
messages. Navigate to chrome://inspect to enable, then perform desired
actions in another tab. Switch back to the same chrome://inspect tab
to view any printed JavaScript console logs.
see here in "What's New" section or in "version history" 73.x version.
For Android you can use remote debugging through chrome as described here
I'll summarize/rewrite the steps (for browser based debugging) here in case the link ever goes down.
Requirements:
For browser tabs: Android 4.0+ and Chrome for Android
A USB cable to plug in your Android device
Chrome 32 or later installed on your development machine
Set up:
Enable USB debugging on your device.
Navigate to chrome://inspect/#devices on your desktop Chrome browser. (Alternatively, to get to the same screen, you can select Chrome menu > Tools > Inspect Devices)
After connecting, you may see an alert on the device requesting permission for USB debugging from your computer. Tap OK
Chrome should now display the connected device
Open up chrome on your Android device and navigate to the page you want to debug/inspect. The page should show up on your desktop browser and you should be able to inspect it.
If for some reason you have an older version of chrome and cannot upgrade. There is a plugin that you can install to accomplish the same thing.
I was searching for a while for something like this. Firebug Lite used to be an option but has been abandoned. Before discovering eruda (as mentioned elsewhere in this thread), I developed my own open source console. It's pretty light on features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.
Here's a demo:
It's activated by just placing this script tag on your page:
<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS#main/console.js"></script>
Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/
I'm experiencing a strange intermittent issue with Chrome Developer tools hanging on to old versions of JavaScript files. I'll be developing some JS app, things humming along just find, and then all the sudden my JavaScript files will disappear from the list of JavaScript files on the "sources" tab. This is my first clue that something is wrong.
What I eventually discovered is that Chrome Developer Tools is, apparently hanging on to an old version of the JavaScript file. Chrome itself is requesting and executing the latest version from the server, but you can't debug the JavaScript file.
I "proved" to myself that this was what's happening by taking a particular JavaScript file that had disappeared from my sources list, and replacing it with a one line console.log statement.
I then reloaded the page, and noted that the console.log statement appeared in the JavaScript console. I also noted in the Network tab that the JavaScript file was successfully retrieved, and that what came down over the wire contained just the one line console.log statement.
However, the JavaScript file still didn't appear in the sources list, and if I clicked on the filename in the console (where it appears on the righthand side of the console, next to the logged statement), then I jump to the sources tab, and an old version of the JavaScript file is opened.
This JavaScript file is loaded onto the page via a regular <script> tag. It is not loaded dynamically, via another script, or via eval. Just a plain, vanilla <script> tag that points to the .js file on the webserver.
I've tried:
Ensuring that "Disable cache (while DevTools is open)" is checked in the DevTools settings.
Manually clearing out my cache and cookies in Chrome.
Restarting Chrome
Manually loading the JavaScript file in a separate Chrome tab
Disabling every Chrome extension/app that I have installed
Running the page in incognito mode
Uncheck both "Enable JavaScript source maps" and "Enable CSS source maps"
None of these changed the behavior. You can watch a video demonstrating this here, if you don't believe me!
I do think it's a Chrome issue, as I can use Firefox without this issue... but I really like Chrome and Chrome's developer tools :-) So I'd like to get this working in Chrome...
Update I reported this as a Chrome bug here. If this bug is affecting you, or important to you, please vote it up and/or add comments with additional information.
Chrome DevTools works fine for me. When I load it for a page it remembers beyond the lifespan of the chrome process what sources I have open; although it gets the order wrong. I see two differences in our devtools prefs: disable cache and enable maps. So I would advise:
1) uncheck disable cache (while DevTools is open),
2) (if 1 didn't work) press the "Restore defaults and reload" button.
The issue persists in 78.0.3904.97. To fix it run settings > advanced > reset.
Some code editors such as rubymine cache js files.
To solve for rubymine: File > Invalidate Cache/Restart
As suggested here https://groups.google.com/d/msg/google-chrome-developer-tools/2rolf--fJ3M/UTJQaZN3K28J, for development environment I added these headers when serving a sourcemap:
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
and it seems to do the job (at least for now).