Develop Reference

How to debug a Chrome extension in WebStorm?

I loaded a Chrome extension in Chrome using load unpacked in developer mode.
I know how to debug inside Devtools.
How does one develop and debug an extension using WebStorm where WebStorm's breakpoints in the extension's Javascript get hit?

No special support for debugging Chrome extensions is currently provided, see WEB-9708.
The IDE can attach a debugger to a running Chrome instance started with --remote-debugging-port option using Attach to Node.js\Chrome run configuration; see if it works for you

Why does Google hangouts support sharing desktop without Chrome Extension in latest Chrome?

As far as I know, in browser, such as Chrome, sharing desktop or application needs a Chrome Extension to work, eg:
chrome.permissions.request({
permissions: ['desktopCapture'],
}
But why does Google Hangouts do not need any extension to capture desktop?
Is there any API of JavaScript for this?

As of now, Google Hangouts does use an extension, it's just integrated into Chrome to the point of not being visible.
Source: Chromium issue to remove this special treatment
You can test that it is (stealthily) installed by manually opening
chrome-extension://nkeimhogjdpnpccoofpliimaahmaaome/background.html
At the same time, work is ongoing to support WebRTC spec for screen sharing (getDisplayMedia) in Chrome. It's not yet enabled by default in released Chrome versions, but will be very soon (code is already in the codebase).
Implementation tracking: Chromium issue

Can one debug javascript on a samsung tablet's native browser

I am currently working on a HTML/JS application that will be embedded in an iOS and an Android app. Because the android app is not yet finished I am testing this on the chrome browser in Android. I fixed all issues there but when I open the same web app in the native browser nothing really works as expected.
So my question is : Is there a way to debug in a native browser on an android device?
In chrome this was pretty easy with remote debugging.
(Please do not advice me to use 'log' statements for debugging because that's not what I am looking for here)
And just to spill my guts : the Samsung Tablet's native browser is the only device that's causing me a headache!

Typing about:debug in the address bar of the native browser will toggle the 'Debug' options in the settings menu.
The 'Show JavaScript Console' option will allow you to see JavaScript errors in your webpage.
NB I believe the JavaScript Console will only be displayed if there is an error.
HTH
Nick.

The new Samsung Internet browser (I think you meant this browser with "Samsung Tablet's native browser") is now based on the Chromium browser and thus supports its remote debugging interface.
Enable USB debugging on your device as described here.
Then connect your device via USB (Oh, surprise!).
Visit chrome://inspect on your computers Google Chrome browser and you will be guided to create the connection:
Then you just have to click on the devices inspect link and an developer tools window will pop up.
More info like why there is an Samsung Internet Browser at all can be found here.

You can easily debug your web application with Web Inspector Remote (weinre).
Look at this post in order to find out how to install and use weinre.
I hope it will help you if this question is still actual.

If you have updated your device you can go to settings -> Debug -> 'Remote Debug Enable'
Once enabled you can debug the native browser just like you can debug chrome.

You can try vorlon solution too, it has a nice web interface & very easy to install
& It's free
But if you can't see clear console errors with volron, you probably want to use #Nick's solution, sometimes complex errors prevents even vorlon or weiner from catching them. So once you fix blocking these issues, probably volron will start catching them properly

Alternatives to F12 Developer tools in Internet Explorer 10 Metro?

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.

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!