How do I locate an Internet Explorer script error? - javascript

I'm finishing up my website. Noticed I have some scripting issues in IE7 and IE8.
Using IETester (any better alternative btw?) IE9's debug tools I can test my website for different IE versions.
Updated Example:
I use JQuery and some 3th party htc files for IE css hacks.
"Line 87" is just a html line so that's not where the error occurs.

The IE Developer Tools (built into IE8+) has a JS debugger that will break on errors.
Hit F12 to open it, select the Script tab, then click the Start Debugging button.

Related

Using Selenium without Firebug?

I am installing Selenium right now and tutorials say, that i need Firebug.
Unfortunnally on the download page (https://getfirebug.com/) it says:
The Firebug extension isn't being developed or maintained any longer.
We invite you to use the Firefox DevTools instead, which ship with
Firebug.next
Does it mean that i have to use Firefox DevTools to run Selenium now?
selenium not dependent on firebug. firebug is a tool to inspect element on page to help you get the CSS locator or xpath which used in selenium script to find element from page. now you can use the devtool to inspect element, like chrome's devtool.
You don't always need firebug. Right clicking an element in firefox or chrome will provide you with an option to inspect an element. From there you can right click on the HTML to copy the xpath and CSS, as well as see an element's ID, name, class etc. The tools can be found by pressing ctrl+shift+i in both chrome and firefox.
For Selenium, you don't need these tools but if you still want to you FIREBUG and FIREPATH Extensions then do one thing Install FIREFOX version 45 or below and uncheck the Automatic Update in Firefox.
Keep in mind as soon as you update the firefox these extensions will stop working
You can find details to stop automatic update on below link
https://www.technipages.com/enable-disable-automatic-updates-in-firefox
For selenium I use firefox 58. Firebug 2.0.19 is only compatible with Firefox 30 – 54. That's why I use the Mozilla Firefox ESR, Portable Edition 52.6.0 and Firebug to inspect elements. https://portableapps.com/apps/internet/firefox-portable-esr

Debug Java Script with Visual Studio 2015 on Chrome or Firefox

I can debug with IE without any problem, but when I try different browsers code is not stopping on breakpoints. I hava a project that is currently not compatible with IE. I'm using OpenJSCAD as a dependency in my project, therefore I need to debug on Chrome or Firefox.
Is it possible to debug Java Script with Visual Studio 2015 on Chrome or Firefox?
You can absolutely do it, however it is a bit tricky to do. In the toolbar, click the button to get the dropdown of browsers to debug with and then click "Browse with...". Click "Add...", set Program to wherever Chrome is on your machine and set Arguments to --remote-debugging-port=9222. You can also set Incognito as I have to ignore cache but it is not required.
Important! Chrome cannot be started before, Chrome needs to start fresh from Visual Studio otherwise debugging won't work.
After this goto "Debug" -> "Attach to Process..." -> select the chrome instance with the title of your project or similar and then click Attach.
If everything works you can now Debug your Javascript in Visual Studio and use all Chrome features as well.
Note that when you have attached to the process you can't just stop
debugging without terminating chrome.exe. However you can get around
this by clicking "Debug" -> "Detach all".
Javascript debugging in visual studio is not possible when we use non IE browser as debugging browser. The developer tools available on non-IE browsers are the first alternative(F12) to the JavaScript debugging.. If they are still not helping, the one should look for third party tools like https://www.jetbrains.com/webstorm/features/#JS_debugging
More Info on Debugging
I had this problem... And I realized what was happening, it was in my web/javascript App. I had an ahref link target='_blank', which created a new window out of the debugging process. So when in the new window no debugging. When in original VS window debugging works. Either temp disable the target _blanks, or hand change the URL in your current window.
Remember to set the Select "WebKit Code" as the "Attach to" option.
Also, to avoid having to start a fresh chrome every time I use Chrome Canary as the target process.
One thing I find annoying with this is that breakpoints placed in the original .js source files are ignored as VS creates "dynamic" script files in which the actual debugging is performed, I wonder if these can be synced somehow?

Which JavaScript functions are called when page loads?

Is there any way to find out which JavaScript functions are called when a page is loaded?
One way is to use alert but if a file is too big ( in my case 5000+ lines ), it would be too difficult to use alert.
I want to find out is there anything in FireBug or Developer Tools that shows the order in which functions are called
Thanks
By the way, thanks to the person who gave negative comment
The Simple Solutions(tedious for you if you have 5000+ line codes) To Your Queries is
Debbuging
There are many way you can debug Your Javascript code
A)The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.|
The Sources panel lets you debug your JavaScript code. It provides a graphical interface to the V8 debugger. Follow the steps below to explore the Sources panel:
Open a site on chrome
Open the DevTools window.
If it is not already selected, select Sources.
B)You can use FireBug Chrome tool But i Beleive Chroe Debugger is handy
but Choose Opera For Optimum result
path
Internet Explorer 8 (Developer Tools - F12). Anything else is second rate in Internet Explorer land
Firefox and Firebug. Hit F12 to display.
Safari (Show Menu Bar, Preferences -> Advanced -> Show Develop menu bar)
Google Chrome JavaScript Console (F12 or (Ctrl + Shift + J)).
Mostly the same browser as Safari, but Safari is better IMHO.
Opera (Tools -> Advanced -> Developer Tools)
use window.onload is perfect to your request
window.onload = function(){
alert("the page is loaded!!!");
};
it was tested onload=function vs window.onload=function
window.onload // works in all tested browsers
onload // works in all tested browsers, faster than window.onload
so it can't fail... use it, for me is the best way
Live CODE

debugging with internet explorer

I have some code that I thought I had written so that it would play nice on IE. But apparently it does not. I use IE8 for my testing and get quite frustrated with the built-in debugging 'tool'. I found that firebug has a javascript tool that debugs for IE but I have to click it for every page, wait for it to load and then test my script. Is there a way to make IE ALWAYS load the firebug .js file? I tried searching for way to set up a custom header file for my IE installation but was unsuccessful.
Is there another tool out there that would be better/easier to use? Another way to test scripts for IE compatibility?
IE7 and 8 provided the IE developer toolbar. This is similar to firebug for DOM inspection, script debugging and style tracing.
Edit:
For IE 8, the toolbar is already packaged with the browser:
The Developer Toolbar is not compatible with Internet Explorer 8. Please use the developer tools included with Internet Explorer 8. Press F12 or click the 'Developer Tools' entry in the Tools menu to begin using the tool. Click here for more information on IE8 Developer Tools.
You can also use Visual Studio and attach to the process in question, then just debug in VS. Pretty good debugging tools, and lets you debug IE6 as well.
Try my log4javascript, which is a logging library that works in every major browser, including IE 5 and later.

Is there something like "Firebug for IE" (for debugging JavaScript)?

I'm trying to fix some JavaScript bugs. Firebug makes debugging these issues a lot easier when working in Firefox, but what do you do when the code works fine on Firefox but IE is complaining?
you can also check out the IE Developer Toolbar which isn't a debugger but will help you analyze the contents of your code.
Visual Studio will help with the debugging
Fiddler should help analyse the traffic travelling to and from your browser
You can try Firebug Lite or use Visual Studio to debug the JavaScript.
Since Internet Explorer 8, IE has been shipping with a built-in tool-set for debugging, troubleshooting, and generally helping in development of your pages/applications. You can access these tools by pressing F12 while in the browser.
HTML Tab
The HTML tab will let you peek into the DOM as the browser understands it. As you select elements from the HTML view, their styles will be detailed on the right, with individual rules have the ability to be toggled on and off. You can also modify rules, and determine whether the styles on the element were inherited, or assigned explicitly. Additionally, you can even tell which .css file they originate from.
There is a bit more you can do in the HTML tab, such as review and modify attributes on elements, and even make changes to the layout of the element from within the layout section. Additionally, you can make changes directly to the markup to quickly test out some structural ideas.
Script Tab
For resolving JavaScript issues, you can watch the Console and the Script Tag. If your script stumbles across an a call to an undefined method, you'll be alerted within your console. The console also lets you run arbitrary JavaScript against your page, if you want to toggle items on or off, or try bind a handler to a button.
The Script tab great as well as it will format your JavaScript for you, allow you to insert breakpoints, step in and over code blocks, and watch variables over time.
If you've used Firebug, or even the Webkit Inspector, the F12 Developer Tools in Internet Explorer 8+ should be pretty familiar to you.
Firebug lite doesn't work too well for me. The Developer Toolbar just isn't good enough. There really is no great solution.
Or IE Developer Toolbar
Have a look at DebugBar. License is free for personal use
For the DOM Inspector, try the Internet Explorer Developer Toolbar.
For the Net tab, try Fiddler.
For Javascript debugging, try Visual Web Developer 2008 Express Edition. (Or a higher edition of Visual Studio)
Also, try DebugBar.
Visual Studio 2008 can do JavaScript debugging, you have to go to IE's Tools->Internet Options->Advanced and uncheck 'Disable Script Debugging (Internet Explorer)' in order for the browser to bubble up the errors it detects.
Once you're in Visual Studio you basically have it's entire debugging arsenal at your disposal. It's not as integrated as Firebug, but it is way better than anything we used to have.
i think it is better that you first install the ie core addon in firefox then load the page with ie addon and press f12.
good luck.
Make a bookmark in the favourites bar, and put this address as the URL:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Then navigatge to the page you want and click the link. Firebug Lite will/should open up...
The IE8 beta comes with what I think is the IE Developer toolbar, but it seems to be a lot more powerful than the last time I tried the toolbar on IE7
I'm guessing this question was posted before the IE8 final came out, according tho some of the answers.
These days, IE8's inbuilt Developer Tools are great; and while the JS debugging isn't as useful as Visual Studio the Dev Tools in general much better than Firebug in my opinion. Between that and the Compatibility View Browser Mode I can handle all my IE6 development needs.
I found a solution to this problem, you could simply stick this tag to the page you are trying to debug and it will open firebug:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
Explanation from https://getfirebug.com/firebuglite#Stable
If you're a serious Front-end Developer, give AJAX Edition a test run:
http://www.compuware.com/application-performance-management/ajax-performance-testing.html
It's a free tool that allows users’ to understand what is causing performance and functional-related problems in modern AJAX/web Applications.
In IE, go to MenuBar->Tools
Select Debugger Tools
Hit F12 and enjoy.
It is far from Fire Bug, but suitable for some quick help
There is always a way how to get around this issue, watch the video and you will be able to install firebug in 2 mins.
install firebug on ie
Good luck

Categories