What's the best way to see all code the browser can see, using google developer tools and firebug. The scripts, network, and css/html/elements tabs are very comprehensive, but browsers most definitely, especially for advanced, huge websites, do not show you everything they can see, in terms of coding. What is the best way to see literally everything a chrome or firefox browser can see (in terms of coding).
If you're using the web developer toolbar in FF.. go to "View Source"->"View generated source"
Related
Anyone know of a good javascript performance tool? I have a javascript heavy page that runs fine in chrome but is very slow in IE.
I'd like to poke around and see what portions of my javascript may be slowing it down.
Dynatrace AJAX Edition is what you want, though it might take a little while to get used to it.
Dynatrace have some good video tutorials / talks online.
http://ajax.dynatrace.com/ajax/en/
It's free too
I know that IE9 has a script profiler built-in to the dev tools (press F12 to access). I know IE8 has the same tools, but unsure if it has the profiler. If it doesn't have the profiler, you could always use IE9 placed into IE8 browser mode
I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.
I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.
Thanks for any ideas.
Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.
But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!
Update:
By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:
weinre is Web Inspector Remote. Pronounced like the word "winery". Or
maybe like the word "weiner". Who knows, really.
For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.
Have you tried Firebug Lite?
I haven't used it on the iPad, but I don't see why it wouldn't work.
I'd probably set a conditional include based on if a query param is set - for instance (php)
<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>
Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
You can also use Firefox's built in WebIDE with Valence
Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"
[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
[3] https://developer.mozilla.org/en-US/docs/Tools/Valence
There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.
If you have an Apple Mac computer, you can connect it to your iPad.
First you must ensure that you have the Web Inspector enabled ("Settings > Safari > Advanced" and turn on "Web Inspector").
Then connect your iPad to your Mac via an USB cable.
After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.
Source of images and original information:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.
You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.
Is there anything that provides a console, error logging, etc. for testing Windows Gadgets? I've searched but I'm unable to find anything.
Thanks in advance!
A simple and easy start is to just use any web developing toolkit. I found out myself that for developing simple Windows Gadgets, Notepad++ and Firefox with its Web Developer toolbar was more than enough. You can implement all the business logic and just test the results in a browser. Actually starting it as a Gadget was only needed to fine-tune some graphical glitches that always occur because of different browsers still interpreting CSS a little differently.
Firefox has some nice tools for debugging Javascript.
You can use firebug lite for IE (i.e put a script tag and include the latest firebug lite version).It does look a bit crude but it works nonetheless and its seamless integration for testing.
http://getfirebug.com/lite/ie.html
Though your gadget might seem a bit mutilated when using it.
:)
I like to keep javascript debugging enabled in my browser so when I'm developing my own code I can instantly see when I've made an error.
Of course this means I see errors on apple.com, microsoft.com, stackoverflow.com, cnn.com, facebook.com. Its quite fun sometimes to see just how much awful code there is out there being run by major sites but sometimes it gets really annoyed.
I've wondered for YEARS how to change this but never really got around to it. Its particularly annoying today and I'd really like to know of any solutions.
The only solution I have is : use a different browser for everyday browsing.
I'm hopin theres some quick and easy plugin someone can direct me to where I can toggle it on and off based upon the domain i'm on.
Edit: I generally use IE7 for everyday browsing
Firebug lets you enable/disable debugging for different domains.
Script Debugging in IE7 is controlled by a registry key. (An addon could probably toggle it. I just don't know of any.)
So, how I handle this is to write a registry script to turn it on or off. Then, I put a link to those scripts on my windows quick-launch bar and change their icons to be more appropriate. Then, I can just click one of the links to turn on or off IE script debugging.
Turn Off:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="yes"
"DisableScriptDebuggerIE"="yes"
Turn ON:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="no"
"DisableScriptDebuggerIE"="no"
Firefox lets you use different profiles. Each profile can have separate preferences, themes and plugins. Start firefox on Windows this way: firefox.exe -ProfileManager to create or manage profiles.
I use Firefox and Webkit for web debugging and Safari for regular web browsing, however. Firefox is just better for web development, and I prefer Safari overall.
I keep those annoying popups on for Internet Explorer, and you're right. It's amazing how few developers ever bother testing their code in IE. As a web developer, it's sorta your duty, right? Seeing as how it still accounts for like 60% of traffic to most sites.
Anyway, in answer to your question, I simply switched to Chrome for everyday browsing, and only use IE for testing and developing.
You have two options.
Change and use a browser that allows you to have site specific configuration (check out Firefox with Firebug), or
Use different browsers for developing and everyday use.
CompanionJS doesn't let you toggle debugging on a domain basis, but makes the error messages less obtrusive for casual surfing, and makes script debugging in general more user friendly.
Chrome doesnt bug you unless you first open the javascript debugger window
If you want to test and debug JavaScript, Firefox and Firebug are unrivalled in terms of features and ease of use. Chrome is not as powerful as Firebug, no matter what anyone else tells you.
I use Firebug and the Mozilla JS console heavily, but every now and then I run into an IE-only JavaScript bug, which is really hard to locate (ex: error on line 724, when the source HTML only has 200 lines).
I would love to have a lightweight JS tool (a la firebug) for Internet Explorer, something I can install in seconds on a client's PC if I run into an error and then uninstall. Some Microsoft tools take some serious download and configuration time.
Any ideas?
You might find Firebug Lite useful for that.
Its bookmarklet should be especially useful when debugging on a user's machine.
Since Internet Explorer 8, IE has been shipping with a pretty impressive set of tools for JavaScript debugging, profiling, and more. Like most other browsers, the developer tools are accessible by pressing F12 on your keyboard.
Script Tab
The Script tab is likely what you'll be interested in, though the Console, Profiler, and Network tabs get plenty of use as well while debugging applications.
From the Script tab you can:
Format JavaScript to make it more readable
Move from source to source of various resources on the page
Insert breakpoints
Move in and over lines of code while stepping through its execution
Watch variables
Inspect the call stack to see how code was executed
Toggle breakpoints
and more...
Console Tab
The console tab is great for when you need to execute some arbitrary code against the application. I use this to check the return of certain methods, or even to quickly test solutions for answers on Stack Overflow.
Profiler Tab
The profile is awesome if you're looking for long-running processes, or trying to optimize your code to run smoother or make fewer calls to resource-intensive methods. Open up any page and click "Start profiling" from the Profiler tab to start recording.
While the profiler is working, you can move about the page, performing common actions. When you feel you've recorded enough, hit "Stop profiling." You will then be shown a summary of all functions ran, or a call tree. You can quickly sort this data by various columns:
Network Tab
The network tab will record traffic on your site/application. It's very handy for finding files that aren't being downloaded, hanging, or for tracking data that is being requested asynchronously.
Within this tab you can also move between a Summary view and a Detailed view. Within the Detailed view you can inspect headers sent with requests, and responses. You can view cookie information, check the timing of events, and more.
I'm not really doing the IE Developer Tools justice - there is a lot of uncovered ground. I would encourage you to check them out though, and make them a part of your development.
I would recommend Companion JS.
This is the free version of Debug Bar but I find it easier to use and have the features I need. Great to test little JavaScript snippets in IE the same way I do with Firebug in Firefox.
EDIT 5 years later: I now uses Internet Explorer integrated developer tools.
IE 8 is supposed to have better tools, but the IE Developer Toolbar is pretty good.
I use both Microsoft Script Debugger and FireBug Lite, depending on what I am debugging. Both are great tools- try them both out and stich with what you're comfortable with.
In IE8 just press F12!
Go to Tools->Internet Options…->Advanced->Enable Script Debugging (Internet Explorer)
then attach Visual Studio Debugger when an error occurs.
If you're using IE 8, install the developer toolbar because it has a built in debugger.