Are there any tools other than Firebug that can help me figure out why my HTML is layed out the way it is? If you list any tools, please add what they can do which Firebug can't.
WebKit's Web Inspector, used by Safari and Chrome.
Opera's Dragonfly
Both do pretty much the same things Firebug does.
I'm usually using both Firebug and Web Inspector. Though I like Firebug more, I had a few errors that I wasn't able to trace using it (they were just listed as errors), but they showed up in Web Inspector.
It doesn't get much mention or much love, but I find Expression Web SuperPreview helpful when trying to debug layout issues.
I only use Firebug for JS debugging, I use Web Developer for Firefox for anything CSS or HTML related.
https://addons.mozilla.org/en-US/firefox/addon/60/
Great for CSS debugging - while Firebug will show you the CSS, Web Dev does it better giving you a nice window with line numbers so you can easily find what needs fixing, plus you can copy and paste from the window.
Shows underlying form information without looking at the source
Outlines various types of elements on the page
Resize the browser window to the common screen resolutions, or to a specified size (love this feature)
I wouldn't say that Web Developer is better than Firebug, just different.
Related
So, I very frequently have Chrome developer tools open when I look at sites just to get a sense of how they're put together, what "real" HTML and CSS looks like.
I've started to realize that some sites will actually behave differently when the developer tools are open. The easiest example I can find is twitter. Basically, if you try to trigger infinite scroll when developer tools are open it simply won't work (pic below).
So I have two questions:
How can I do this intentionally if I want to?
Is there a reason for this behavior and if not, is there a way around it?
My client uses ie8 and the site I made for them works fine in all other browsers EXCEPT ie8. Most things are out of place and I can't figure out what styles are causing this to happen. I am now using ie conditional styling, but I don't know what to put in my stylesheet since I am not sure what attributes are not showing up.
Anyone know a software that compared your style css to what styles are actually being used?
Assuming that you're running the latest IE, run the developer tools (press F12 while viewing your webpage, or go to IE's Tools -> F12 Developer Tools menu), and select the Emulation tab, then change the document mode to IE8. You can then inspect the element that's causing the issue. Unfortunately you'll have to do trial by elimination in order to find out what styles are or aren't being used.
I know of no software that will automate this for you, but you can check for this yourself at 'http://caniuse.com/#cats=CSS'
This keeps very up-to-date data on browsers and their feature compatibility.
Have you tried pressing F12 to access developer tools? If you click on the DOM explorer tab, you can browse through the code.
Once you find the part of the code you are interested in, you can click on it and see the relevant css in the panel on the right.
I've posted a photo here: http://epic-xp.com/wp-content/uploads/2015/02/test.png
Is there a tool that allows to see the whole page oulined in the browser? For example, I have a lot of hidden divs or images, may be overflown by some other elements and I want to see all the elements outlined, just to see what is placed in what place. If you ever used Adobe Illustrator, you could understand what I mean if you switched to outlines mode there by clicking CTRL+Y. I use FireBug now for something like that, but may be there is something more advanced for that?
Try using the Web Developer add-on for Firefox.
It has plenty of tools for this kind of stuff. Although not one exactly as the outline-mode in Illustrator.
IE8 Developer Tools has a "show all DIV elements" option. Press F-12 to open the developer tools window.
I love Firebug plug-in for Firefox. Firebug allows you to navigate around the page, and it will highlight the element you've selected. It's a very powerful tool and it makes it very easy to see how your site hangs together. Plus it's got loads of other debugging tools built into it. If you're developing web sites, you should be using Firebug.
There are similar tools available for other browsers. Recent versions of IE have the "developers tools" built in, though it's not as easy to use or as powerful as Firebug. Chrome and Safari also have a Developers Tools feature, which is quite powerful. Personally I still prefer Firebug, but they are all useful tools.
Hope that helps.
Web-developer on fire-fox has been very helpful for me. I particularly like the outline block elements which has been helpful for me building sound structures and see how my elements are lining up as I go, and view style information that allows you to hover over all of your elements and see the css path.
It sounds like outline block elements would be what you are looking for.
Is there a Windows application that I could use to simply paste the HTML source of a page, and have it parsed so that I can see where each section starts and ends?
When lines are wrongly indented, it's a pain to figure out the logic of a page.
I'd rather a stand-alone utility rather than an add-on to a browser.
Thank you.
Edit: If possible, I'd like a light utility (ie. not a full-fledged IDE like Eclipse or VS) that displays blocks as a tree, so I can fold/unfold blocks and concentrate on those I'm interested in.
If you develop your HTML in Eclipse or IntelliJ you can use the format code shortcut
The built-in DOM inspectors in most modern browsers would be a good start. I know you said stand-alone rather than a browser add-on, but the advantage with these is that they will highlight the element on the page which is extremely handy. They're also good for playing with CSS and quick Javascript experiments.
For IE8, go to Tools > Developer Tools (or F12). There are a couple of extentions available for IE6 & IE7: IE Developer Toolbar and Web Development Helper
For Opera and Chrome, simply right click anywhere > Inspect Element. Safari also has this it just has to be enabled.
For Firefox you need to download Firebug
Of all of these I prefer Firebug. In my experience it tends to be most stable and easiest to make HTML and CSS changes to the page for experimenting, although the WebKit inspector is also very good.
Always remember that these tools show you the parsed DOM tree, which may be different from the original HTML.
Sounds like HTML tidy will fit the bill.
Many programmer editors already have this in place - notepad++ has a HTML tidy feature, visual studio can also be used (Ctrl + k + d).
Install freeware Opera Browser, navigate to the page, right click on something, press "Inspect element".
Is there anything like Firebug that you can use within Google Chrome?
Essential features I would like:
Inspect HTML source (select elements, delete them, etc.)
check CSS values (the built-in solution is weird, somehow)
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.
For more information, see https://developers.google.com/chrome-developer-tools/
Firebug Lite supports to inspect HTML elements, computed CSS style, and a lot more. Since it's pure JavaScript, it works in many different browsers. Just include the script in your source, or add the bookmarklet to your bookmark bar to include it on any page with a single click.
http://getfirebug.com/lite.html
Just adding some talking points as someone who uses Firebug / Chrome Inspector every day:
At the time of writing, there's only Google DOM inspector and no it doesn't have all the features of Firebug
Inspector is a 'lite' version of Firebug: The interface is not as good IMO, element inspection in both recent versions is now clunky, but Firebug is still better; I find myself trying to find the love for Chrome (since it's a better, faster browser experience), but for development work, it still just sucks for me.
Live preview / modification of DOM / CSS is still way better in Firebug; calculated CSS and box model view are better in Firebug;
Somehow it's just easier to read/use Firebug maybe because of the ease of navigating, manipulating/modifying the document in several key areas? Who knows. I'm used to the interface and I think Chrome Inspector is not as good although this is a subjective thing I admit.
The Cookies/Net tab are extremely useful to me in Firebug. Maybe Chrome Inspector has this now? Last time I checked it did not, because Chrome updates itself in the background without your intervention (gets your consent by default like all good overlords).
Last point: The day that Google Chrome gets a fully-featured Firebug is the day Firefox basically dies for developers because Firefox had 3 years to make Firefox's layout engine Gecko as fast as WebKit and they didn't. Sorry to put it so bluntly but it's the truth.
You see, now everyone wants to move away from Flash in lieu of jQuery motivated by mobile accessibility and interactivity (iPhone, iPad, Android) and JavaScript is 'suddenly' a big deal (that's sarcasm), so that ship has sailed, Firefox. And that makes me sad, as a Mozilla fanperson. Chrome is simply a better browser until Firefox upgrades their JavaScript engine.
F12
I love shortkeys
Try this, it's called Firebug Lite and apparently works with the beta version of Chrome.
You can also find it at:
https://chrome.google.com/extensions/
You can set this bookmarklet in your "Bookmarks Bar" in order to have Firebug lite always available in Chrome/Chromium browser (put this as the URL):
javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Or try user scripts: http://dev.chromium.org/developers/design-documents/user-scripts
jQuerify is the perfect extension to embed jQuery into Chrome Console and is as simple as you can imagine. This extension also indicates if jQuery has been already embedded into a page.
This extension is used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by Ctrl + Shift + j".).
To embed jQuery into the selected tab click on extension button.
The official Firebug Chrome extension or you can download and package the extension yourself.
https://getfirebug.com/releases/lite/chrome/
Well, it is possible to enable Greasemonkey scripts for Google Chrome so maybe there is a way to sort of install Firebug using this method? Firebug Lite would also work, but it's just not the same feeling as using the full featured one :(
willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/
This doesn't answer your question but, in case you missed it, Chris Pederick's Web Developer is now available for Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm.
Forget everything you all needs this browser independent inspector , dom updater
https://goggles.webmaker.org/en-US
just bookmark and go to any webpage and click that bookmark..
this is actually Mozilla project Goggles , amazing amazing amazing...
F12 (only on Linux and Windows)
OR
Ctrl ⇧ I
(⌥ ⌘ I if you're on Mac)
Please try Firebug Lite for Google Chrome
If you are using Chromium on Ubuntu using the nightly ppa, then you should have the chromium-browser-inspector