Alternatives to F12 Developer tools in Internet Explorer 10 Metro? - javascript

I'm testing our JavaScript-heavy web application on Windows 8. For what it seems, IE10 on desktop works just fine. However, the Metro UI version for IE10 seems to break our application.
My question is this: is there a way to debug web applications on IE10 Metro?
For what I know, F12 developer tools are not available.

Here's microsoft's recommendation for debugging pages as if they're being run in Metro IE:
F12 developer tools is only accessible while
browsing a website in Internet Explorer for the desktop. If you're
browsing in the Internet Explorer in the Windows UI, you can debug the
website by switching to the desktop view (from Page tools, select View
on the desktop) and opening F12 tools from there.
To emulate Internet
Explorer in the Windows UI on the desktop:
Enable ActiveX Filtering (from the Tools menu, select ActiveX Filtering)
Enter Full Screen mode (F11)
Enable Enhanced Protected Mode (listed under Security on the Advanced tab in Internet Options)
Found at http://msdn.microsoft.com/en-us/library/ie/hh771832%28v=vs.85%29.aspx

The rendering/ JS Engine in IE10 Desktop and IE10 should be identical. Does your app use any Add-ins (for things like cut and paste support?) As far as I am aware taking IE10 Desktop and switching off plugin support should be the same as running your app in "non desktop IE10"
As for debugging, you can't get tools to run in IE10 desktop mode. I often use fiddler to inspect the traffic, but you will need to enable loopback on the machine to get this running for Metro IE.
You could add firebug lite to get basic dev tools.

Related

What if Chrome dev tools mobile not real?

I am a front-end engineer, but recently I find a circumstance happen usually.
That is what we set by media query for RWD and everything seem good in Chrome dev tools to switch to iphone5, iphone6, but when I really use my iPhone, open such as Safari, or Google App (maybe Chrome mobile), the style just go away.
Now people use mobile device a lot, so how do you overcome this situation?
Check out USB Debugging for the chrome browser or safari with android and iphone.
[Chrome USB Debugging]
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Chrome developer tools closes JetBrains IDE support plugin

I debug with PhpStorm 2016.3 my JavaScript code remotely using JetBrains IDE support plugin for Chrome (my Chrome version is 56.0.2924.87 (64-bit), plugin version is is 2.0.9).
When I try to open Developer tools in Chrome, JetBrains IDE support plugin instantly closes connection.
Is it possible to keep both PhpStorm debugging plugin up and see what is happening in Network tab in Chrome?
This is a limitation in Chrome:
We currently do not support multiple clients connected to the protocol simultaneously. This includes opening DevTools while another client is connected. On the bug tracker, crbug.com/129539 follows the issue; you can star it for email updates.

Remote debugging javascript on iPad from a Windows machine possible?

I have an iPad with iOS 6.1 connected to a windows 8 machine. I would like to be able to debug some javascript code running on the iPad.
The safari on iPad has a web inspect option that needs the iPad to be connected by wire to computer and then can be accessed in Safari for desktop's develop menu. I installed Safari 5 for Windows but don't see the iPad detected in the develop menu.
Any other ideas ?
The Firefox Tools Adaptor allows one to use Firefox DevTools for Safari on iOS.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
For remote debuggin I use Weinre.
Weinre has almost everything you need, but lacks a JavaScript debugger.
It has a WebInspector for DOM manipulations, network traffic, timeline, resources and a console.
Checkout this project on GitHub: weinre-remote-debug to setup weinre locally.
Another option described on this page is jsconsole.com. By appending a <script> tag to your page (or running a bookmarklet on your device) you get access to a JS console.
To start, go to jsconsole.com and run :listen in the prompt. This will give you a unique session ID and a script tag that you insert into your mobile web page.
Now, any console output that your mobile page generates will be streamed to the console open in your desktop web browser, including any errors!
It is certainly no replacement for a full web inspector, but it can get you out of trouble when you don’t have access to a Mac.
Source: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/

Is there a way to use Webkit Inspector Remote Debugging in iPad?

I have an iPad and I am wondering if I can remote debug it from the desktop using Webkit Inspector? As I understand it, it requires you to launch the browser with a command line switch. I do not think that's possible to do in iPad, but I may be wrong.
What about iPad2? Or Android powered tablets?
See weinre
Here's an excerpt:
It's a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
If you aren't familiar with FireBug or Web Inspector, weinre isn't going to make too much sense to you. weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.
Now you can debug using Safari 6 and the new Web Inspector straight on the iPad/iPhone simulator http://encoreptl.tumblr.com/post/31512516711/web-inspector-debugging-for-iphone-and-ipad-from-mac-os
Also a new blog post out using private apis that makes this very easy -- see http://atnan.com/blog/2011/11/17/enabling-remote-debugging-via-private-apis-in-mobile-safari/
For the iPad Emulator (Xcode 4.2) you can use iWebInspector to comfortably enable the remote console:
http://www.iwebinspector.com/
Your question mentions Android tablets. With Chrome for Android (4.0), you can debug web pages remotely in Chrome for the desktop over USB. I use this and it works very well. See https://play.google.com/store/apps/details?id=com.android.chrome&hl=en and https://developers.google.com/chrome/mobile/docs/debugging.
Edit: weinre, mentioned in the accepted answer above, also reports that it works in the Android browser.
Paul is correct, weinre is great. In addition, in http://css-tricks.com/14727-five-questions-with-paul-irish/ Paul Irish hints that this will be (is?) possible with the Chrome Developer Tools/Webkit Inspector:
I'm very excited about the work the team has done on remote debugging as that is now available to all mobile WebKit ports, which means you're able to profile, view network detail, and edit the CSS live on your device.
I have yet to see an example on how to do this with iOS Safari, however.
You can also use this to activate Firebug on your device. Worked for me on Windows
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
Safari allows you to debug and inspect the elements in the mobile browser. Also many remote consoles like www.farjs.com or jsconsole.com also allow that.
www.farjs.com used with a debugging proxy like Charles also allows you to debug a web-views in native apps.
If you are not tied in to Webkit-based debuggers and can also debug using Firefox's Inspector, using Firefox Developer Edition might be your answer.
This version of Firefox includes WebIDE and Valence, which together make it very easy to debug Safari on iPad. Here are the steps to follow:
Enable the 'Web Inspector' on Safari in your iPad: go to Settings > Safari > Advanced > Web Inspector and make sure it's on.
Open the page that you want to debug.
Connect the iPad to your machine with its USB cable.
Open Firefox Developer Edition in your machine.
Click on the WebIDE add-on in Firefox (you might have to look for it under the main menu)
Select 'Safari on iOS' as the Runtime
Click on 'Open App' and you'll see the page that you opened on Safari listed there.
Select it. A FF dev tools window will appear.
Debug away!

Best way to debug Javascript on an iPhone app?

I'm doing some rough development on the iPhone. I'm writing a native iPhone app, which uses an UIWebView object to load web sites with javascript. I find very difficult to debug the javascript code on an iPhone.
What are the methods/techniques available for this matter?
Since Safari on the iPhone is using webkit, you could use the debugger built into desktop Safari's web inspector. While there will probably be some quirks that are different between platforms, it will give you a pretty good idea of what's going on in the interpreter.
If you have access to an Android phone, you can debug your application using desktop Chrome's full developer tools and a USB cable (very convenient).
That means the debugger, profiler, HTML inspector, etc, all running on your mobile phone, but accessed through chrome running on your laptop/desktop computer.
Android Chrome and iPhone Mobile Safari are usually more similar to each other than Desktop Safari is to Mobile Safari, the screen format will be similar, the layout similar, and you'll be able to try real touch events, etc.
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the android Chrome app, and a USB cable.
You have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Similar to Adrian Harris, it is possible to debug any website on the iphone by creating a dummy project in dashcode, clicking on "Mobile Safari" and then "Run"
Once the iPhone Simulator opens and safari opens with the dummy project website, click on the url bar of safari, enter any public url, and when you are at the site, you can click "Pause" and the debugger will pop up after any javascript code runs. At this point, variables can be inspected, breakpoints set, etc.
I know this is an old question, but wanted to update the answers with the latest info ->
The new safari (for mac) has a way to use the web inspector on an actual iphone or ipad in real time if you have the latest software (safari, iOS6, and MacOS) and an attached (with a cable) iDevice.
You access it by enabling it in the "advanced" safari preferences on the iphone, then under the develop menu in safari on the mac. See here for more info: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515
You can also access the simulators in the same way (installed with xCode).
I agree with pjbeardsley. I would add to use your web page within http://www.testiphone.com/ just so you can see what the dimensions will be like. I would definitely use Safari and the Web Inspector for it as well
I have had mixed success using Dashcode which has a javascript debugger paired with the iPhone Simulator. It is a bit tricky to get working because you can't launch it without opening a project. But as I recall, I posted the project on the web, launched a placeholder project, and then debugged the placeholder project in Dashcode. Then I navigated to my url in the Simulator and was able to set breakpoints. There were probably a few other hoops to jump through, but once it was working, it was like I had a real debugger within Mobile Safari, which was great.
Good luck

Categories

Resources