I have a webpage that heavily uses Javascript (AJAX requests, Google Maps API, HTML building, etc) and the page brings my PC to its knees whenever opened in Internet Explorer. I'm looking for some tools to help me find out which functions are taking the most time to finish. I have some basic profiling javascript functions, but those don't help much considering I don't know what function specifically is being slow. The tool has to be for IE, as the page runs fine in other browsers.
For JavaScript, XmlHttpRequest, DOM Access, Rendering Times and Network traffic for IE6, 7 & 8 you can use the free dynaTrace AJAX Edition
You might actually want to check out the Developer tools that come with IE8. I know js debugging and profiling are part of it.
Take a look at YUI Profiler.
Related
I have a very large javascript application, which contains mostly asm.js code (it's built upon urho3d c++ engine which is them compiled into asm.js).
It runs great on most browsers (chrome, firefox, safari, edge) but is extremely slow on IE11. The thing is, it is only slow until you open developer tools. With developer tools open, IE11 becomes ~10 times faster and is almost as fast as other browsers.
Here is a minimal example that reproduces the issue:
http://test.sebbia.com/urho3d/test.html
Open the page in any working browser, the time between "Run - start" message and "Run - finish" message should be around 1-2 seconds.
Open the page in IE11 without developer tools, time should be around 35-50 seconds.
Open developer tools and reload, time should be around 2-3 seconds.
Another important note is that if I start profiling session in developer tools, performance drops like if developer tools were closed. So I can actually profile the problem. But I've spent several hours profiling and I've tried inserting log messages in big functions but I haven't found no bottleneck. All functions take roughly the same time to execute and if I insert log message in a middle of a big functions, they'll usually break into 2 similar parts. So there is no single function that is responsible for slowdown, the code execution is just slow. Bit shifts, functions calls, arithmetic operations - it seems like they all just take way too much time compared to open developer tools.
I really need to make my app work on IE11 and the fact that it works with developer tools open drives me crazy. I'm trying to find a way to make IE think that tools are open even when they are not, or achieve good performance by any other means. So my questions is how can I achieve performance equal to IE11 with developer tools open without actually manually opening the tools?
This is a very broad question so I'd like to break it down into several smaller questions:
Is there a way to make IE11 think developer tools are open? Maybe there is something like x-ua-compatible meta tag I am missing?
What's causing the slowdown when developer tools are closed? I've heard that console.log function calls are slow without developer tools on IE8 and 9, maybe there is a similar thing on IE11? Maybe asm.js is not optimized? If I knew what's causing this I could at least try to rewrite code to avoid this.
Is there a way to open developer tools from javascript code? Maybe I could ask users to press a button on website to "make app faster". Asking them to press F12 or navigate settings seems too much.
When the debugger is enabled, asm.js compilation will be disabled and execution will fallback to be executed as normal JS - you can see the console.logs along these lines at the start of execution.
asm.js has been disabled as the script debugger is connected. Disconnect the debugger to enable asm.js. in Edge,
asm.js type error: Disabled by debugger in Firefox,
whilst Chrome will simply not open 01_HelloWorld.js in the debugger when you attempt to.
Disabling the debugger in IE (debugger tab, socket symbol; eighth from the left), and thus enabling asm.js will allow you to have dev tools open but see the slower execution. I have a horrible feeling that the slowdown when the debugger is closed is actually just IE11's speed issues with asm.js's optimisations.
There are a lot of references to IE11 being poorly optimised for asm.js. caniuse.com goes as far as listing IE11 as not supporting asm.js at all.
https://caniuse.com/#feat=asmjs
This appears to be backed up by Microsoft themselves:
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/asmjs/
There would certainly appear to be some support for it, though clearly it has a number of speed issues as demonstrated in a number of benchmarks, for instance:
https://github.com/Kukunin/asm.js-benchmark/blob/master/README.md
Which shows IE11 around 10x slower than other browsers, or:
https://www.ghacks.net/2014/11/03/massive-benchmark-highlights-asm-js-performance-of-web-browsers/
Which is based on:
https://kripken.github.io/Massive/ - You can try it for yourself.
And many others. It may simply be that the IE11 implementation of asm.js is so poor that it is considerably slower with it, than without it.
EDIT: Added Microsoft platform status link.
There are two workaround for this issue:
to add setInterval(30000, () => {}) to your initialization function;
add MutationObserver=null to the beginning of the main html
You can also reference the discussion here:
https://github.com/OfficeDev/office-js/issues/521
This is just a guess but I had a similar problem in react-native then I found out about this:
When debugging remotely, your js bundle is using chrome's JSC and when
running on a device it's using the JSC provided by Apple on your phone.
Make sure that urho3d is not changing environment when developer tools are on/off.
On some pages of my WebApp IE hangs with message Example page is not responding due to a long running script but I can't troubleshoot it since Developer Tools panel hangs as well and does not respond.
I have IE 11.
How do you troubleshoot this kind of issues?
Here's a blog post from the IE team's former program manager which describes exactly how to deal with your situation:
http://blogs.msdn.com/b/ieinternals/archive/2014/01/15/debugging-internet-explorer-with-windbg.aspx
They're not as simple as you would expect since you will need to use tools such as WinDbg but definitely adds some knowledge in your arsenal
My team has an existing web app, which is using some Dojo code but isn't fully "Dojo-ified" -- no custom widgets, and our AJAX calls tend to fully refresh the content pane with completely regenerated HTML, rather than just getting JSON data and updating the DOM in-place.
As part of a POC effort, a few of my teammates and I have refactored a part of our code to be "fully Dojo" -- XHR calls invoke RESTful services that return JSON, and everything is run through custom templated Dojo widgets we've created.
We need to measure the impact of this change in multiple ways -- improvements in request / response times, page load timings, and client-side effects such as differences in memory usage.
I'm trying to find some browser tools to measure the size of the generated DOM for each code base, so we can verify we're not massively increasing the memory footprint by going "full Dojo" or otherwise potentially impacting client-side performance. I found a couple of postings related to this ( Tools to measure website size and Tool to measure all (js)objects in a webpage), but they both suggested the use of Chrome's tools and nothing else.
Are there any tools for the other major browsers (Firefox, IE 7/8, and Safari)? Or is Chrome the only one that has such a tool?
IE8+ profiler
Firefox profiler
Safari profiler
Fiddler: http://www.fiddler2.com/fiddler2/
I have a large, javascript heavy web app that I am working on. I am experiencing very slow response times from Chrome Dev Tools for XHR responses and console loggging (3-5 secs). The actual app is running fast and responsive, only dev tools looks like it is suffering.
Does anyone have any idea why Chrome Dev Tools is becoming sluggish as my app grows?
Devtools are like any other debugger; they hook into the normal processing flow of an application, and store quite a bit more information than is normally required. This is much more work than simply rendering the page without debugging enabled, so it will indeed be slower.
That said, 3 seconds to respond to console.log seems high. I'd suggest that you first test the application in a nightly version of WebKit. If it's responsive in WebKit, but not in Chrome, please file a bug against the inspector via http://new.crbug.com/ along with any information you can provide about what scenario causes the slowness.
If it's equally sluggish in WebKit, please file a bug against WebKit's Inspector component: https://bugs.webkit.org/enter_bug.cgi
Either way, post the bug ID here, and I'll see that it's triaged into the correct team.
I "fixed" the slow chrome developer tool by (under SOURCES tab)
clearing the "watch" list that accumulated over time...
clearing all the "snippets", i had dozens as well...
Not sure which of both made the most difference, but it certainly made a difference
This is an old question, but it may help someone landing here later like I did.
Using Chrome 46.x/47.x on Linux (RHEL 7), none of the proposed solutions worked for me. What did work was to disable the setting "Use hardware acceleration when available", in the advanced browser settings.
I noticed in the process monitor/list that the Chrome renderer was taking up a lot of CPU, even putting a breakpoint or stepping throught statements in the debugger would take 10+ seconds!
Might be worth a shot.
Undock the developer tools into separate window.
In my case, it's work.
I struggled with this also, to the point where stepping through code using the chrome debugger was just so slow it took hours away from my productive development time. In watching the CPU utilization when debugging in chrome I would see it use up to as much at 40% of all 4 cores of my processor. I tried everything to no avail. Finally, I tried making the browser window of the page I was debugging as small as I could without losing any of the required view and miraculously it solved the problem. So, now I keep my debugger window popped out in a separate window, and make the window of the page I am debugging as small as I can and my debugging experience is very fast again. I have tested this over a period of weeks and it has held out. Hope this helps someone.
Is there a way to port a chrome extension to other browsers, without having to entirely re-write the code? My chrome extension uses the browser_action command to open "popup.html" in the extension window...
Update: I found adblockforchrome port.js and found it only somewhat helpful for porting to Safari...
Apple provides some guidance on how to port convert a Chrome extension to Safari, but the problem you're going to run into is that each browser has a different set of allowed functionality for extensions. Even with Chrome to Safari, there are things you could do in Chrome you can't do in Safari, and visa versa.
It depends on the type of the extension, but not really. To answer your question more clearly, you need to specify what your extension is about: modify some pages (like userscripts/userstyles), extend browsers' features, or something else.
There are a few portability notes, however, that could help you to simplify this process:
Don't write browser specific code. In some modern browsers you're able to use HTML5 features, like Web SQL Database API. It is difficult to emulate such behaviour on IE, for instance.
Keep your JavaScript modular; don't use vendor specific JavaScript methods, and your code will be portable and will not rely on TraceMonkey or V8;
Separate HTML from CSS and Javascript, don't make your code dirty and complicated.
Jumping in a bit late.
Our company - Slice Factory (full disclosure here!) does provide a browser extension conversion service: http://gallery.extensionfactory.com/labs/conversion/
In most cases your chrome extension will work seamlessly in FF and Safari.
The service is still in beta trial, and Firefox conversion is working better than Safari one.
I can't fully disclose what's our technical solution, but this being an SO answer, I can add a few details: we have re-developed a full javascript api stack that mimics most of chrome extension APIs for Safari and Firefox; in Firefox we base our work on JetChrome. Plus we have wrappers that re-package the chrome extension adding our library and rewriting manifests and so on.
Beyond that, it's mostly a few good ideas, trial and error, and a LOT of development time.
As an example:
Safari 5.1 just introduced a popup corresponding to Chrome's browser_action, but we have already an alternative solution that works for previous versions. Firefox does not support HTML5 WebSQL, but we have an API for it. We also provide a way to bring webapps to FF, and soon to Safari.
The objective is to have Chrome API as a reference, and mimic it on all the other browsers.
Without pushing you towards our solution, I might add that the time to fully cover the Chrome API on both Safari and Firefox is probably not worth it - unless you plan to convert several extensions. So for just one or two extensions I would advise making your code as modular as possible, and just creating three extensions - or trying our service!
Yes, it's possible with Webextension API using webextension-polyfill.
I made use of it to build this where I only had to change the callback methods to Promises and using browser.something instead of chrome.something to call the browser APIs.