Is Firefox dev tools able to catch all the error? - javascript

Since Firebug was discontinued I had to started using the Dev Tools.
I was debugging a page, when I was clicking a button it was not firing the event. I realized a function was not defined, the JS file reference was missing, however, the Dev Tools did not tell me about it.
Trying my old still installed Firebug it threw something like "ReferenceError: foo function is not defined".
Do I need to enable any options more for Dev Tools? or isn't Dev Tools able to catch all the errors?
UPDATE
Test case
<script type="text/javascript">
function DoSomething(e){
e.preventDefault();
foo();
}
</script>
Click me!

You need to ensure that the "JS" filter is enabled within the Console panel.
If that doesn't help to see the error, you may try the new console frontend. In Firefox prior to version 55 this can be enabled by going to about:config and setting the preference devtools.webconsole.new-frontend-enabled to true. In that new UI ensure that the filters "Errors" and "Warnings" are enabled.
If you still can't see the error logged, it's probably a bug in the DevTools. In that case you should try whether you can reproduce the problem in a new Firefox profile. If you can also reproduce it in the new profile, you should report the bug (if there isn't one already; bug 755553 seems to be related) and either profile a URL to a page where the error occurs or attach a reduced test case.

Related

How to see debug() messages from contentscript.js while debugging a Chrome extension

I am debugging a Chrome extension off github. (https://github.com/artemave/translate_onhover)
I want to see the debug() messages that are in the code: like this one...
--------From contentscript.js------------
const hit_text_node = getExactTextNode(text_nodes, e)
if (!hit_text_node) {
debug('hit between lines')
return ''
}
I have tried:
In Chrome on a web page, I tried right-click verbose, but they don't appear.
I do see console.log('jim103',word) from devtools from chrome://extensions background.js
I also tried putting the word
debugger;
in both files, but it just caused a breakpoint in background.js, not the debug message I seek...
I know these two files are back/front separated... That's all I know.
JavaScript does not have a built-in function called debug, which tells us that it's a custom one. We could also figure it out by trying to step-into that function during debugging (with F11 key). This leads us to trying to find its definition – and it's at the top of the file: const debug = require('debug')('transover'). The fact that the argument of require here is not a path, but just a name, tells us that this is a package – go to package.json and there it is: "debug": "^4.1.1". By default, NPM packages are downloaded from npmjs.com, let's head there and find the package – https://www.npmjs.com/package/debug. Its docs tell us that in the browser environment its behaviour is controlled by localStorage https://www.npmjs.com/package/debug#browser-support. So all you have to do is type localStorage.debug = 'transover*' In the console for a particular site and reload the page. Debug messages will start appearing in the console.
-В Иванов
There are two outputs, back/front background.js comes out in DevTools, but front=contentscript.js:debug() stuff comes out on the page.
Do right-click->Inspect and look on the right side.

loading pref showConsoleLogs before prefs were initialised, you will not get the correct result

CMS - wordpress
after some changes i have error on one page:
loading pref showConsoleLogs before prefs were initialised, you will not get the correct result content-script.bundle.js:333
http://www.74skazka.ru/restorany/baden-gourmet/?donotcachepage=84523706ac5384c08c3beb52312fdef0
if i delete all code error anyway here
The Ghostery extension causes a similar issue for me, but you didn't include the full logs, so can't be sure
The error itself should be harmless. It is an internal error message that comes from prefs.es, which is used by the Ghostery extension and the Cliqz extension.
There is an open bug report:
https://github.com/ghostery/ghostery-extension/issues/135
Until a fix is released, it is safe for you to ignore the message, as it does not indicate a problem in your website.

PyCharm Django Javascript Debugger

I cannot figure out how to debug JavaScript code that is executed while loading a Django template.
I have installed the ChromeExtension (localhost and port 63342). Then I have created a RunConfiguration:
JsDebug with the url "http://localhost:63342/ThingShare/2/" Every time I try to debug this I receive :404 not found. The Debugger Console says : "Connected to JetBrains Chrome Extension"
The same url
"http://localhost:8000/ThingShare/2/" works like a charm. I have no clue where to continue here
Pycharm Pro version(prerequisite)
run -> Edit Configurations
Thought I'd leave this answer for anyone still looking to get Pycharm's Javascript breakpoints working.
After trying to get this working myself I found that if I check the "Run browser" box and also check the "Start Javascript debugger automatically when debugging" box then my Javascript breakpoints worked. Please see the attached image for configuration details.
Note that for this to work Pycharm opens a new browser window. You can only use this new window for debugging as it seems Pycharm makes a connection to that window specifically.
Hope this helps!
If you press ctrl+shift (cmd+shift) when you click on the 'Starting development server' link, Pycharm will launch a debug browser window that will respond to breakpoints in your js code.
I could not get this thing to work properly. I switched to the chrome javascript debugger without any hassle

Firefox Javascript console and network tab not showing important errors?

While casually debugging some javascript on a web page, I noticed that Firefox (33.0 - Windows 7) Javascript console would not tell me if some .js files failed to load, so I decided to give this a closer look.
What I found is that if I have an HTML with a script tag pointing to a wrong local url, as the page loads the console shows no errors at all. Instead it shows the full path and file name for the wrong .js script as if there was nothing wrong with it.
I also tried with a button element issuing a xmlhttprequest to a non existing remote url, and same thing, no errors at all in the console when clicking.
$("#button").click(function(){
console.log("clicked me")
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
while "clicked me" will show as expected.
Also I verified that every possible log setting in developer tools is checked.
After reading that someone had luck with complete settings reset I went through that using Menu > Help > Troubleshooting > Reset Firefox settings. But... no. The errors still don't show up.
So, end of the story, given I just recently decided to look into this, and I can't exactly remember how long I've not been seeing errors exactly, I am questioning myself whether those kind of errors do not shown up at all in Firefox by design and if it's just a prerogative of Chrome... which, it goes by itself, shows all the errors (like for example "net::ERR_FILE_NOT_FOUND").
Anyone for a quick test on their console?
UPDATE, attaching screenshots of both Firefox and Chrome.
As you can see the situation is totally different.
Code:
Firefox Console Tab:
Also no errors on the missing files, whose name is just printed out normally in the console as if nothing was wrong with them.
Firefox Network Tab:
AS OPPOSED TO
Chrome Console Tab:
Chrome Network Tab:
After looking at the screenshots you added, I noticed that you were references resources on your local file system, so I decided to do some tests. I found that Firefox indeed does not report network errors for files on the local filesystem, reporting nothing on the console or the network tab, however it does report them properly for network resources. Unfortunately I could not reproduce the errors in chrome exactly, as my local filesystem is locked down rather tightly (I'm on an enterprise-owned system) and chrome simply reports that it doesn't have permission to access the local filesystem, regardless of whether the file exists or not (Firefox says nothing). Meanwhile, I imagine if you pointed your script/link tags to a network address such as a CDN, or if you are testing on a local test server something like:
http://localhost/[script-address]
it should report the error in both consoles.
Here's my test code:
And the firefox net panel
And the chrome console
Preserving my original answer below this point, as the JQuery API notes may be helpful for others who find themselves here
As mentioned in Ian's comment, and the JQuery API document at http://api.jquery.com/jQuery.getJSON/ JQuery's getJSON method will simply fail silently if you have a syntax error, the URL doesn't exist, or if it doesn't return a response. You can force it to do so by adding a .fail() method call to the end like so:
$("#button").click(function(){
console.log("clicked me")
$.getJSON("demo_ajax_json.js",function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
}).fail(function() {
console.log("AJAX request failed");
});
});
You can also bind a function to the error event by using the .ajaxError method documented here: http://api.jquery.com/ajaxError/
$.ajaxError(function() {
console.log("AJAX request failed.");
});
Note that when you do it this way, JQuery will pass the function several useful parameters if you create variables to hold them, including the error event itself, the ajax object that triggered it, the settings that were used, and the error string, which you can then use to output whatever information you need to the console in order to debug what was causing your error. Good luck!

enabling Firefox 5.0 javascript dump()

I'm going through firefox extension writing bootcamp and somewhere along the way the video's author is speaking about switching browser.dom.window.dump.enabled in about:config to true. This option is no longer present in firefox 5.0. From what I read during my google searches, in ff 4.0 you had to create this preference yourself, and it seems like in firefox 5.0 it doesn't work anymore - I can't seem to dump information to firefox error console any more (regardless of whether console2 is enabled or not).
Relevant code:
Here's how I'm launching the browser:
/usr/bin/iceweasel -profile /some/path -no-remote -jsconsole
And here's the code that only shows the alert, without writing anything to the error console:
onCommand: function(event) {
toJavaScriptConsole("toJavaScriptConsole: hello world");
dump("Hello world!\n");
alert("Hello world!\n");
}
Any idea what I can do to have working dump() called from the ff extension I'm working on in firefox 5.0?
You confused the error console with plain linux console - if you run firefox from terminal you should see the dumps right there.
in-depth explanation
This preference was never present by default - you always had to create it and set to true. Also, the output doesn't go to Error Console, it is rather visible in the terminal you start Firefox from. If you happen to test on Windows you should specify -console command line flag to open a terminal window for the output, on Linux simply starting Firefox from a terminal window will do.

Categories