This question already has answers here:
How can I debug my JavaScript code? [closed]
(20 answers)
Closed 6 years ago.
I have some old javascript code from around 2000-2002 which (surprisingly) still works in IE, but doesn't in Firefox, Chrome, Opera etc. I already found out about some quirks, some browsers do some things this way, some another. So there are code snippets on the internet to create some browser plattform independent function that does it.
Now my problem is, to even locate the problems. Right now, there are buttons in the website, when I click them, something happens in IE, but Firefox does just nothing. There isn't even an errormsg. I tried stepping through the javascript Firebug, but at some point in the code, when I do the next debug step, the script just seems to abort, without any error message. It doesn't continue with the next statement. Pretty strange and I have no idea what causes it or how to fix it. :/
So how do I debug javascript so I get error messages telling me what the problem is, for example, what function/variable I'm using isn't defined in firefox or when I use wrong parameters.
Thx & Best regards
Marc
Firebug for firefox is okay. The console for safari and chrome, IMO, is better. In either case, right click the page, hit "inspect element," and click the "console" tab in the pane that pops up. Now you'll see any errors and warnings generated by the page.
If you really want to debug the scripts you can click on the "Scripts" tab and either pause execution immediately or set a break point. Then, you can step through the execution of the script line by line, inspecting the call stack and watch list as you go.
Firefox doesn't popup error messages or put them in the status bar (like IE). You have to open the Error Console to see the errors.
Firefox puts Javascript errors in the Error Console, but also HTML and CSS errors and warnings.
As to what might not work in the code, there are plenty of things that are IE specific and won't work in any other browser. Also there is a big difference between IE in quirks mode and IE in standards compliant mode. Put a proper doctype in the page so that it's rendered in standards compliant mode, which will make IE more like other browsers, and some IE-specific quirks are removed. This might cause your old script to stop working, in which case you know that it's likely that it's some IE-specific feature that causes the problem.
There's FireBug, but it only works for Firefox.
EDIT: Doh, you already mentioned this in your question.
Related
I have an HTML page that has an embedded javascript file that for some reason or another I cannot debug. I can click on the error line to go to the location in the code but once there I cannot actually set a breakpoint inside the IE 11 debugger. I can however set a breakpoint in the HTML which isn't helpful to me.
I've read similar posts on the topic but they haven't helped. I've unchecked the box that disables script debugging in the IE 11 options.
Does anyone know what could actively prevent the debugging from happening? Even console.log lines aren't making it through...
Thanks.
edit: the exact error I'm getting is SCRIPT1010: Expected identifier on an Object.entries().forEach call that I've already added the necessary polyfills for.
IE so much confusing me with some errors like this,
SCRIPT1002: Syntax error
File: jquery-2.1.4.min.js, Line:2 Column 2538
The weird thing is , on firefox and chrome running well and no error.
And some button with jquery click function is working.
I'm Using IE 11
Before this i'm using jquery-1.1.13.min.js and when i use jquery 2.0 it still running properly on firefox and chrome
I'm really new with cross browser so any info will helping me very much, thanks :)
For the record I had this error which only showed itself on IE when doing cross-browser testing of a big Javascript code change.
In my case the problem was a function definition which included what would be a default in any other language:
i.e. Function Foo(param1, param2, param3=false)
.. clearly this was a stupid bit of code .. but it took me a while to track down so this might help someone out there. Doesn't show up in Chrome, FF, or even Edge.
Mostly these errors are not problems of jQuery itself. The problem situates in code using jQuery or inserted into jQuery (callbacks or event functionalities). In my case I used $.ajax to load a remote page in a div element. In the page I loaded there where // comment tags in the javascript part. As IE is putting this content on one line, more code that as I wanted was commented and this created the error.
So if in our case us are using $.ajax maybe this can be an issue. Otherwise best thing to do is debugging the code that generates this error and look for code that is not supported by IE (the version you use). Look for functions passed trough to jQuery.
When debugging JavaScript code using Chrome Developer Tools the debugger pauses on code where breakpoints are not set. I don't have the Pause on exceptions feature enabled, and there definitely are not breakpoints set (see attached image).
I asked a similar question before which was helpful but didn't quite solve this issue (previously I had the Pause on exceptions enabled). In the example below I swapped out the minified version of kendo.all.min.js for the unminified version, which allows me to see where the script execution is being paused, but I don't know why it is being paused. This happens a lot with jquery.min.js too.
I fixed my breakpoints problem by clicking the "Restore defaults and reload" button located in the “Settings” section. To find the button: In Developer Tools click the cogged wheel next to the top right three vertical dots. (Note: If using older versions of Google Chrome, click on the top right three vertical dots and then select “Settings F1”). The button “Restore defaults and reload” is at the bottom right.
Also note that it really restores defaults - you lose all previously saved breakpoints and any files you have open in Developer Tools will be closed.
I got this solution from: Chrome javascript debugger breakpoints don't do anything?
Accepted answer to Import/export Chrome devtools breakpoints & settings between computers reminded me to check "devtools-on-devtools" and in the DevTools' inner Application Local Storage remove the faulty element(s) of the JSON list value for key breakpoints to fix my same issue without resetting everything.
Later it happened again, so I wrote this console snippet:
((stores, matchKey, removeMatchingRegExp, dryRun)=>{for(let store of stores){
let r = JSON.parse(localStorage[store]), l = r.length;
r = r.filter(b=>!b[matchKey].match(removeMatchingRegExp));
if(!dryRun) localStorage[store] = JSON.stringify(r);
console.log(`${dryRun ? 'Would' : 'Did'} remove ${l - r.length} entries from ${store}:`, r)}; return 'OK'})
(['breakpoints', 'domBreakpoints'], 'url',
new RegExp('^https?://example.com/script.js$'), true)
Note:
Provided without warranty: Use at own risk. Backup your data.
Edit it - at least the RegExp argument - to suite your needs.
The last-most boolean should be false to disable dryRun.
Outer DevTools must be reopened for effect.
I was able to resolve this by updating Chrome. I don't think the version matters, just the process of updating resets all of the breakpoints that have been stored in the cache.
F8 has two functionalitys. 1. Skip ot next Breakpoint, 2.stop wherever the Browser is executing code. This works even if you have no breakpoint set. For example spamming F8 when you forgot to deactivate breakpoints might cause the browser to stop anywhere.
When you go to the debugger shortcuts you can see that F8 has the functionality to Pause / Continue. But it sadly seems like you can't split them on two different keybinds.
Since I know this feature I never ran into this "bug" anymore.
I'm posting this answer in case it will help someone who, like me, missed an important clue as to the cause of the phantom breakpoint behavior. In my case, it was "user error" --mine. The root cause was a forgotten "debugger;" statement in a JavaScript file that was itself generated from TypeScript. I had removed the debugger; statement from TypeScript locally, run and tested without issue from localhost. But I had pushed the version with the statement to remote and it built and released to our dev site with the statement present. The dev site build excludes the TypeScript source files. When the debugger statement was hit, Chrome tried to load the .ts source and displayed "Could not load content..." I just assumed it was at a breakpoint (I'd set many during testing). And when I saw "No breakpoint" I assumed Chrome was experiencing the issue addressed in this thread. If I'd bothered to look in the Call Stack trace, I would have seen the source code line in the .ts file and pretty quickly figured it out. Here's a screenshot:
just disable the cache and reload the page, the breakpoints will show up again
Why does Firebug say there is No Javascript on this page when there are clearly loads of JavaScript on the page. I even reloaded the page several time to make sure but it still show the same message.
It never used to do that before, but all of a sudden it misbehaves.
Is it because of some configuration issues or because of something else?
As of Firefox version 50, it seems that Firebug will no longer work as Mozilla are migrating to Firefox Devtools. The tab Tools/Web Developer has a 'debugger' option. See this page for a discussion on the migration. Read all the posts dated 19 November for further information.
It seems to me that the option gives less functionality but Firebug per se is never going to be fixed for Firefox 50 and beyond
EDIT 2017 April
This answer is now outdated and I'm not even testing it anymore because I'm no longer using Firebug (a shame, I loved it years ago in a time it was The tool of trade for web developing).
EDIT 2014 November
The original answer is now more than a year outdated due to firebug evolution.
Thanks to #AmadeusDrZaius to keep it on tracks
Answer for outdated firebug versions
For anyone still with this problem after updating Firebug.
Just click Clear Activation List option inside the Firebug menu.
For those who can't find it, note that "Clear Activation List" shows up in the dropdown from the Firebug icon in the toolbar, but not the Tools > Web Developer > Firebug menu.
I guess due to the bug previous hitting your working page it stays listed as "no activate FB for this site please".
I encountered No Javascript on this page after upgrading Firefox to ver 50.0, with Firebug ver 2.0.18. I tried refreshing Firefox, even completely uninstall Firefox and installed again. Nothing works for me.
A couple of hours later, I downgraded Firefox to 49.0.2, and voila, it works right away. I downloaded the old version here.
I tried everything on this list and nothing worked for me except resetting Firefox like so:
https://support.mozilla.org/en-US/kb/reset-firefox-easily-fix-problems
I realize there are already 10 answers to this question, but in my case none of them helped. I'm running Firefox version 39.0 and Firebug version 2.0.11. The only fix is to completely restart Firefox (i.e. not just the tab or instance with the problem).
Perhaps it's due to Firefox's over-usage of memory, or maybe there's a bug in Firebug. I can't speak to that, but what I do know is it didn't work. I killed Firefox, opened the exact same page again with no changes made and now it works. This has happened to me numerous times and a complete restart always fixes it, but that's the only thing that does.
Since Firefox 49.0 and Firebug 2.0.18 the Script panel is broken. This is due to some internal Firefox API changes. And because Firebug is officially discontinued, this unfortunately won't get fixed anymore.
There was also a bug in Firebug 2.0.11 (and below) in combination with Firefox 39.0 causing this problem. This bug is filed as issue 7918.
It happens when the Script panel is enabled and you close Firebug and reopen it.
You can see two related error messages logged to the Browser Console (can be opened via Ctrl+Shift+J or Firebug menu > Developer > Browser Console):
error occurred while processing 'attach: TypeError: docShell is null
Stack: getChildDocShells#resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webbrowser.js:53:7
...
and
onPacket threw an exception: Error: Server did not specify an actor, dropping packet: {"error":"unknownError","message":"error occurred while processing 'attach: TypeError: docShell is null\nStack: getChildDocShells#resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webbrowser.js:53:7
...
Solution:
The only solution until this bug is fixed is to restart Firefox completely.
Similar things have happened to me because I forgot to add the closing tag.
DON'T do this:
<script src="some.url" type="text/javascript">
or
<script src="some.url" type="text/javascript"/>
DO this instead:
<script src="some.url" type="text/javascript"></script>
The same problem just happened to me. I thought that it was a problem in my scripts, but I checked google.com and the problem persisted.
My problem was that I had updated my version of FF and kept the old version of FireBug. When I updated FireBug and everything was solved.
From firefox 49, the fire bug will be built in and it is called fire-bug next. So the fire bug add on won't work properly and no issues will be solved. So you can use firefox inspector. See here for details information
If the problem only shows up on a single page, check that your script folder is referenced from current folder (".") or that's reachable from the server root ("/").
<script src="./scripts/pagescripts.js" type="text/javascript"></script>
may not be the same as
<script src="/scripts/pagescripts.js" type="text/javascript"></script>
As mentioned, sometimes there's a Javascript syntax error that invalidates the whole script. But I have also had this, and simply opening up the page in a new tab or window and refreshing firebug (disable, enable) gets the javascript to show up again.
One time this caught me out was when I published one of my sites and I was checking it out. No Javascript was working, there were no errors in the console and firebug showed no scripts.
It turned out that in that instance, I'd forgotten to allow the site in NoScript - so there really were no scripts being loaded.
Not sure if that's the problem you're facing but it's worth being aware of.
I also got this error when attempting to use Ajax to a different server than the one serving up the page. JavaScript only allows Ajax access to the server that served up the page.
This problem is STILL happening (Aug 2015) with Firefox 39.0.3 and Firebug 2.0.11
For people saying the code is wrong or missing end tags etc. all I did to get all the javascript to reappear in tab was to shut down Firefox and restart it. I didn't change anything. Also that "Clear Activation List" option didn't work (no idea what that means)
I upvoted #Tom_Thomson's answer above, but I am wondering if simply removing and then reinstalling the Firebug add-on might not have accomplished the same thing without losing all the other stuff like bookmarks.
FWIW this problem is still happening in August 2016. I'm using Firebug 2.0.17 with Firefox Dev Edition 50.0a2.
As a workaround, I'm able to use the Developer Tools, though they are not as robust as Firebug (when it's working).
Well Firefox native Inspector is good... I know that you will miss some things, but in general we can survive with it. The good news is... less one addon, FF will be faster :)
Apologies but this is not a programming question, but it may have a programming answer.
For some reason my site, http://pctools.alwinsights.com will not display properly in IE (I'm using version 8) but it's fine in firefox and chrome. The content does not appear in the centre of the screen in IE and also generates two JS error messages while the pages are loading.
I've tried enabling Active X and Scripts in the security settings but with no joy. I've also looked around the net but cannot find an answer, well not one that works!
Unfortunately I know nothing about javascript so really don't know where to start with the error messages that are generated.
Any help appreciated.
regards
Nigel
Update:
OK initial error has gone, I'd screwed up with a directory name - apologies.
I've found out that if I disable the option to display the last twitter feed in the wordpress theme it loads OK. So it is the JS code in a php script called thememx-document.js that is causing the error. The code generating the error is "var twitterHtml = jQuery.cookie(twitterCookieName);" It says it's charcater 4, which is a space but I don't understand this.
I can live without Twitter on this site but it still leaves issues as to why content isn't centred nor the pop-up ad is not showing (compare to Firefox) but this may not be a programming issue that warrants a question on this site.
Thanks to all for your comments and input.
Nigel
Start with valid code; a validator will pick up lots of problems. Among yours is content before the Doctype, which triggers quirks mode. Quirks mode causes browsers to emulate bugs in ancient browsers and become much more inconsistent with each other. One of the emulated bugs in Internet Explorer breaks standard centring techniques.
for not properly disply-- its the problem of CSS ...IE7 and IE8 dosen't support css3.so you should simply make another css stylesheet for IE and call it on page only if someone visit your site using IE. and for other broswers it will show exiting style.
and abot JS error --you should check all your php coding and then fix it. its not JS problem. if you are not familar with PHP coding then i am here to offer my free service to you or anyone else. i will help you as i can.
First, having problems with any version of IE is expected and the norm. IE is the worst browser on the planet.
You have a link element on your first line. Links belong inside the head element. Placing it on the first line throws IE into 'quirks mode' and then IE becomes even worse than it normally is.
Good.
OK, maybe your site has to work for IE. 9 times out of 10, the problem is a terminal comma. The following is understood in real browsers but generates an unintelligible error in IE:
var x = [ 1, 2, 3, ];
The tenth time (in my experience), it's string indexing.
var x = "abc";
var c = x[2];
In a real browser, c is set to "c"; in IE, another unhelpful error message.
If this helps, remember: in IE, it's very important to create as many circular dependencies as possible. That is, attach to DOM elements JavaScript functions that have references to other DOM elements. IE fails to clean up such dependencies when the user leaves your site and so leaks memory. Once it leaks enough memory, IE slows and eventually freezes the OS and the user learns a valuable lesson: don't use IE. (Microsoft has a good page explaining how to do this although, inexplicably, they recommend against doing it.)