Is there a tool similar to Chrome's Timeline ? I don't mean the Net tab in Firebug ... I mean this :
https://developer.chrome.com/devtools/docs/timeline.
What do you use for Performance profiling in FF? I tried the FF Profiler but it's not nearly as helpfull as what Chrome has.
Thanks.
Firefox's profiler will get an significant update in 34.0, so if you're willing to run Aurora, give it a try.
Here are the docs: https://developer.mozilla.org/en-US/docs/Tools/Performance
Expect a lot more performance related tools in the coming versions of Firefox.
We've been working on a new timeline that reports Gecko (firefox's rendering engine) operations like style calculations, layout, paints. It's in Nightly right now and needs to be turned on from the options panel.
It's pretty similar to what the Chrome devtools provides.
It's still experimental for now (that's why it's behind a pref) and will move around quite a bit in the coming months, but it's a start.
Related
Since last few updates of Firefox our beloved Firebug is integrated into the Firefox Developer Tools and a lot of people including me don't like what happened to Firebug.
The built-in developer tools have a very ugly menu system and messed up usability.
So, what are the alternatives to the Firefox Developer Tools? Is there a tool with the same usability as Firebug?
Alternatives are:
Turn off multi-process Firefox. (Though that's only a temporary solution and doesn't bring back all functionality of Firebug. E.g. the Script panel is broken in current versions of Firefox.)
Install an old version of Firefox where Firebug still works and disable updates. (Also only a temporary solution, because you'll miss (security) bug fixes and new features.)
Wait until the gaps between Firebug and the Firefox DevTools are fixed. (Or even help them fixing them.)
Switch to another browser and use its developer tools.
Rework Firebug to make it compatible with multi-process Firefox (which is the main reason for the integration into the DevTools). Update: Starting with Firefox 57 only WebExtensions will be supported, meaning extensions work cross-browser and are more secure, but they also have limited APIs. So, a reworked Firebug would not have all the features the original Firebug had.
Following Sebastian's advice I've downloaded old Firefox portable v47 from here:
https://sourceforge.net/projects/portableapps/files/Mozilla%20Firefox%2C%20Portable%20Ed./Mozilla%20Firefox%2C%20Portable%20Edition%2047.0.1/
and I'm using it with Firebug only for development. According to Firebug's website 47 is the last compatible version of Firefox:
https://getfirebug.com/downloads
To avoid compromising on security, for normal browsing I use updated version of Chrome.
Downgrading the version is not advisable, So instead of that go to the browser console and type your respective xpath in the mentioned syntax $x('path') to validate your XPath.
Or can find other similar plugin. So far I find the Plugin 'Xpather' in http://xpath.alephzarro.com/ link.
But I still would like to reactivate Firebug to rework by setting the preferences browser.tabs.remote.autostart,
browser.tabs.remote.autostart.1 and
browser.tabs.remote.autostart.2
to false via about:config.
I prefer google chrome in almost every way above IE10, but one thing I hate is that fonts just look much better in IE10. This especially visible with small math fonts. They look like pdf quality in IE10.
After searching a little bit, I found out that this is because IE10 use DirectWrite in windows 7/8 for font rendering. I was searching if chrome will support this in the future and I found this information:
Apr 24, 2013:
An update for everyone that's watching this one:
Our Windows font rendering is actively being worked on. Basic support
for DirectWrite is now in Skia (to update from comment #13). At the
same time, GDI was very deeply embedded in the Windows WebKit port and
is still being rooted out. We hope to have something within a
milestone or two that developers can start playing with. How fast it
goes to stable is, as always, all about how fast we can root out and
burn down any regressions.
We'll update the thread here when it's available behind a runtime flag
for y'all to try out.
Oct 8, 2013
The following revision refers to this bug:
http://src.chromium.org/viewvc/blink?view=rev&rev=159071
Changed paths: M http://src.chromium.org/viewvc/blink/trunk/Source/core/platform/graphics/skia/FontCacheSkiaWin.cpp?r1=159071&r2=159070&pathrev=159071
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/page/RuntimeEnabledFeatures.in?r1=159071&r2=159070&pathrev=159071
Add runtime flag for using DirectWrite on windows
Add runtime enabled feature for using the DirectWrite skia backend on
windows.
BUG=25541 R=bungeman#chromium.org, eseidel#chromium.org
Review URL: https://codereview.chromium.org/26335002
I don't even know what a runtime flag is, but this sounds to me that it may be possible to somehow enable directwrite in chrome. Is this true ? Or should I wait a little longer before I can use directwrite font rendering in chrome ?
Sadly not yet (as of 2013-10-31, no Chromium channels supports this feature out-of-the-box).
If you look at the latest RuntimeEnabledFeatures.in, DirectWrite doesn't have any status assigned to it. According to Blink document, users cannot enable a feature via about:flags unless status=experimental is assigned.
But hopefully soon, so windows users may have a better time with web fonts :)
Update 2013-11-16: with latest issue 25541 comment, it seems we are very close to be able to enable DirectWrite in Canary.
Update 2014-01-04: Canary build now has a command line switch that can enable DirectWrite font rendering, but disabling sandbox mode are required (not safe for everyday browsing). There are also a few font rendering problem associate with it. Hopefully they can get them fixed and add this feature to about:flags soon.
Update 2014-05-09: latest Canary build (m36) now has proper support for DirectWrite within sandbox mode (implemented via issue 333029), which means developers can enable DW directly by going to about:flags#enable-direct-write. As for consumers, Google is targeting release on m37.
Update 2014-08-09: Chrome 37 beta enables DirectWrite by default, expect Chrome 37 official release to have it by default as well.
Update 2014-08-31: Chrome 37 stable release has DirectWrite enabled by default! Just note that users can still turn it off at about:flags (some of them use MacType instead).
Chrome 35 (beta) comes with an option to enable DirectWrite for Windows font rendering. Paste the following command in your address bar and click enable:
chrome://flags/#enable-direct-write
Reference: http://www.reddit.com/r/web_design/comments/22q9r9/chrome_35_beta_has_finally_fixed_windows_font/
It's currently in development for chrome on windows.
http://www.chromestatus.com/features/4725550652325888
Update: on August 26, 2014, Google updated the stable version of their Chrome browser to version 37.0.2062.94 on Windows, OS X, and Linux. With this release, Chrome move from Microsoft's Graphics Device Interface rendering method to Microsoft's DirectWrite text rendering API. Switching to DirectWrite has been requested for years by users on Windows, and Google has stated that it took significant rewriting of their font rendering engine which is why it has taken so long.
It's in Chrome as a flag as of 33 (and as of this time of writing), however from what I understand you still need to run it with the sandbox disabled via the command line --no-sandbox. This is not a recommended action for everyday use. You can enable the rendering flag, but it will only change if sandboxing is disabled.
(I would have added this as a comment to #chickenbooze, but I've switched SE accounts and don't have enough reputation yet :)
If I use the F12 Developer Tools to debug for IE, can I depend on the "Browser Mode" and "Doctype" to debug issues for IE8 and below?
By debugging I mostly mean for overall page behavior... HTML/CSS, A client says "The dropdown doesn't work in IE8", I have IE9... Instinct is to hit F12 and change the doctype or browser mode and test.
Short answer, no.
I would not recommend using compatibility mode. I have never quite understood why MS doesn't seem to do what Mozilla and Google do which is, disallow the use of deprecated tags. As an example, at my work, we have two tiers of browser usage, tier 1 and tier 2. Tier one consists of: Safari (oddly enough, we get quite a few customers buying via their iPads), Chrome, Firefox and IE9. Tier two is: IE8 and the rest of the pile. Recently, we had a bug where some checkboxes where not rendering correctly in **only IE8**; but worked fine in IE7 and IE9. The moral here is that using compatibility mode is testing under an assumption, and if you want thorough and correct testing, you cannot assume anything.
You can try to use the Quirks mode, but that's not 100% the same. If you are lucky, you will hit the same bug also in quirks mode.
The only sure way is to use a IE8. There are cross-browser testing tools that enable you to do so without any installs.
Just for bug reporduction purposes http://www.modern.ie/virtualization-tools offers some VM-s you can use.
I've got this weird bug. The progress bar in IE's bottom-window status bar keeps incrementing very slowly after an Ajax POST. At least that's where I think the problem is.
How can I tell what the hell IE is doing that's causing the progress bar to keep going? In FireFox, I would just look at the Console tab in FireBug and see what's up.
I turned Fiddler on but it doesn't pick up any HTTP requests or responses being sent.
What can I do in IE?
I'm not very experienced in Web debugging but you might try the Developer Tools that come in Internet Explorer 8. It's under the Tools menu, or just hit F12. I think the Profiler tab may be helpful. I had heard somewhere that the IE8 Tools were created to mimic Firebug's feature set as closely as possible.
An another tool for checking HTTP requests is the Debugbar
This might not help if Fiddler isn't picking anything up, but HttpWatch is a great http request debugging tool for IE.
I don't think there is a problem here, earnestly. IE has a bug where it shows that a request has not yet been completed when it has. This has been around for a while now, and I have tested my own applications against it. There is nothing happening and there are no connections waiting for a response, yet the browser still thinks there is an open connection.
i recently discovered this tool for earlier IE versions which can be used in combination with the IE debugger for network profiling and more behind the scenes debugging
http://www.ieinspector.com/httpanalyzer/
open IE ...thn press F12 ...here you will get many menus..to debug script choose "SCRIPT" option..and start debug...and if there is any error on page...thn u will get on Console option..also see on attach image...
Using Firebug v1.20b7 with Firefox v3.0.1 I use firebug a lot for web devlopment.
I have very often the problem that Firebug won't show its web console for seeing the POSTs and GETs. I can view all the other tabs, including the NET tab that gives me a lot of the same information that the CONSOLE tab does.
Curious if anyone else has had this problem, and maybe a solution, or maybe this is a bug of Firebug.
There is a limitation in firebug (or rather, in firefox iteself), which will be fixed in one of the newer Firefox releases.
The bug is caused by the fact that firebug needs to send data a second time to monitor what's going on in the connection.
There's now a special API hook in the firefox trunk that should prevent this workaround in the future, so that firebug can really spy on what's going on :)
Well, 1.20b7 is technically a beta version of Firebug. :)
I've had problems with certain features off and on, but a restart of Firefox seems to fix it more often than not.