New iOS 6 Safari comes with Web Inspector feature which allows to connect to it from your desktop Safari via USB cable. It then allows you to debug pages opened in iOS Safari from your desktop. But as far as I seen, this feature curently supported only on Mac Safari, not on Windows? Am I right, or Windows Safari also has the possibility? Or it will become available later maybe?

Accessing iOS Safari Web Inspector from Windows Machine

The network tab on Chrome developer toolbar is great, but I&#39;d like to see what protocol was used to transfer the resource (HTTP or HTTPS). Anyone knows how I can do this, or if there&#39;s an extension to allow me to do something similar.

How can I view the protocol used in Chrome developer tools network tab?

When viewing information about stylesheets in the Network tab of Chrome&#39;s dev tools, one column specifies both &quot;size&quot; and &quot;content&quot;:

![Screenshot of dev tools with Size/Content column highlighted][1]

Can anybody shed light on the difference between these two numbers? On some pages the numbers are close and others they are different by a considerable amount.

  [1]: http://i.stack.imgur.com/oEwmR.png

Chrome Dev Tools - &quot;Size&quot; vs &quot;Content&quot;

I&#39;ve recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It&#39;s one thing to have a reload cycle for working on the on-screen layout:

- change code
- command-tab
- reload

but that whole process gets much more arduous when you&#39;re trying to print:

- change code
- command-tab
- reload
- print
- squint at print-preview image
- open PDF in Preview for further inspection

Are there tools I&#39;m missing out on here? Does WebKit&#39;s inspector have a &quot;pretend this is paged media&quot; checkbox? Is there some magic that Firebug (*shudder*) can do?

Suggestions for debugging print stylesheets?

I am working on developing a website and need to work on the print view. Typically when I have layout issues I use Chrome&#39;s Element Inspector. However this does not exist in print preview mode. 

Is there a Chrome plugin or some other way to change your viewing medium within chrome itself, to view a page as a printer would?  I suppose it doesn&#39;t have a be a Chrome specific solution, but that is my primary browser so it would be nice to have an in-browser solution.

Right now I&#39;m focused just on the print preview medium, but it would be ideal to be able to change to any of the supported media types (i.e. all/braille/embossed/handheld/print/projection/screen/speech/tty/tv).  

Using Chrome&#39;s Element Inspector in Print Preview Mode?

I&#39;m creating an `Ionic` app using `es6 modules`, `TypeScript` and `SystemJS` as a module loader. This is my setup:

**tsconfig.json:**

```json
{
  &quot;compilerOptions&quot;: {
    ...
    &quot;target&quot;: &quot;es5&quot;,
    &quot;module&quot;: &quot;system&quot;,
    ...
  }
}
```

**index.html:**

```html
&lt;script src=&quot;lib/system.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;systemjs.config.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;System.import(&#39;js/app.js&#39;)&lt;/script&gt;
```

**example script (TypeScript):**

```typescript
import {IConfig} from &quot;./app-config&quot;;
    
export class ConfigLoader {
    ...
}
```

Everything runs great in Chrome. However, when debugging using Safari&#39;s Web Inspector, I cannot place any breakpoints in the scripts because Web Inspector only shows scripts that are loaded directly from the HTML (through script tags), and not scripts loaded by XHR (in my case, by SystemJS). This means I cannot debug my own scripts, which is of course unacceptable.

I tried to work around this by using SystemJS like before, but also placing the script tags in the html, like so:

```html
&lt;script src=&quot;lib/system.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;systemjs.config.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/app-config.js&quot;&gt;&lt;/script&gt;
 ... other app scripts
&lt;script&gt;System.import(&#39;js/app.js&#39;)&lt;/script&gt;
```

However, this doesn&#39;t work, as SystemJS does not seem happy about this:

&gt; Invalid System.register call. Anonymous System.register calls can only
&gt; be made by modules loaded by SystemJS.import and not via script tags.

How do I use SystemJS and at the same time have the ability to debug in Safari? I&#39;m looking for a solution a little more sophisticated than &#39;put a debugger statement in each script&#39;...

Debugging in Safari&#39;s Web Inspector, when using a module loader like SystemJS

When I&#39;m working with CSS, I&#39;ll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.

It&#39;s not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select &quot;export&quot; or &quot;copy&quot;, and have the contents available in my clipboard.

Does something like this exist?

Export CSS changes from inspector (webkit, firebug, etc)

Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?

How to use chrome web inspector to view hover code

How do people debug websites on mobile devices?

I&#39;d like to be able to manipulate the HTML and CSS similar to using the Inspector in a desktop browser, and debug JavaScript.

How to debug web sites on mobile devices?

iOS 6 comes with built-in support for remote debugging ([1 minute screencast](http://www.screenr.com/GYZ8)). It plays nice with the new Safari Web Inspector which seems to be a 1 year old fork of WebKit Inspector. It misses some features such JS editing and WebSocket frames inspection.

&gt; Safari&#39;s Web inspector does use the WebKit remote debugging protocol. However, Safari does not use TCP/HTTP as a transport layer, thus making it incompatible with Chrome.

[says Timothy Hatcher (aka Xenon), Apple employe](https://devforums.apple.com/thread/158126)

 - What does Safari use for transport layer?
 - Can I make a proxy from this mysterious transport layer to HTTP to make it work with Chrome DevTools?

Debug iOS 6+7 Mobile Safari using the Chrome DevTools

As of version 19, Chrome&#39;s Web Inspector has an experimental feature called &quot;snippets support&quot;. Here is how to activate it:

1. Open chrome:flags, enable &quot;Developer Tools experiments&quot;, restart.

2. Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable &quot;Snippets support&quot;, restart.

    ![enable snippets support][1]

3. Open the Scripts panel, click the &quot;navigator tree&quot; icon on the left, and find an empty Snippets tab.

    ![snippets tab][2]

My question is: **What can I use this for? How can I populate this with snippets?**

  [1]: http://i.stack.imgur.com/Thsl0.png
  [2]: http://i.stack.imgur.com/01MI3.png

Chrome Developer Tools: What is Snippets Support?

When I connect my iOS 6 device for remote debugging for testing my mobile web application, The safari develop menu with my device name shows &quot;No Inspectable Applications&quot;. 

I have enabled web inspector ON in my device safari device settings.

Why this is happening?

Why Safari shows &quot;No Inspectable Applications&quot; during remote debugging with iOS 6 device?

After upgrading to Xcode 11.3.1, I am having problems using Safari web inspector with the iOS 12.1 simulator. Every time that I run an app inside of an iOS 12.1 simulator device, it will show up in the Safari debug menu and allow me to connect to it, but the only tabs I will see are Sources, Console and Audit. 

Here is a screenshot of the inspector attached to an instance of the Safari browser inside of the simulator.

[![enter image description here][1]][1]


Is there any way to resolve this?


  [1]: https://i.stack.imgur.com/Lch96.png

Environment:

 - MacOS 10.14.6 (18G95)
 - Xcode 11.3.1
 - Safari 13.1 (14609.1.20.111.8)
 - Simulator Version 11.3.1 (SimulatorApp-912.5.1 SimulatorKit-570.3
   CoreSimulator-681.17.2)



Safari web inspector is only showing Sources, Console and Audit

What tab in chrome inspector shows the font files you&#39;re loading via font-face? I can&#39;t find it under resources. I&#39;m having an issue where one group of font-family files are loading, but another font-family is not. I have checked everything from going directly to the URL and seeing they are indeed present, but I would like to look in the inspector and see it loading the one font-family but not the other. Is this possible with chrome?

All Web Inspector Solutions on Gang of Coders

Total of 14 Web Inspector Solutions

Accessing iOS Safari Web Inspector from Windows Machine

How can I view the protocol used in Chrome developer tools network tab?

Chrome Dev Tools - "Size" vs "Content"

Suggestions for debugging print stylesheets?

Using Chrome's Element Inspector in Print Preview Mode?

Debugging in Safari's Web Inspector, when using a module loader like SystemJS