web-inspector | 易学教程

Debug iOS 6+7 Mobile Safari using the Chrome DevTools

阅读更多关于 Debug iOS 6+7 Mobile Safari using the Chrome DevTools

问题 iOS 6 comes with built-in support for remote debugging (1 minute screencast). 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. Safari'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 What does Safari use

How to detect if browser console / inspector is open?

阅读更多关于 How to detect if browser console / inspector is *open*?

问题 What's the best way to determine if the user has the browser console (i.e. firebug, webkit inspector, Opera dragonfly) open ? (I.e. I'm not interested in merely detecting the presence of the console object in script. I want to know when the user has actually opened the debugger panel. Ideally across the major browsers (IE/Safari/Chrome/Firefox... and even mobile browsers if possible) 回答1: If you are willing to accept an interference for the user, you could use the debugger statement, as it is

Chrome Developer Tools: What is Snippets Support?

阅读更多关于 Chrome Developer Tools: What is Snippets Support?

As of version 19, Chrome's Web Inspector has an experimental feature called "snippets support". Here is how to activate it: Open chrome:flags, enable "Developer Tools experiments", restart. Open Web Inspector (Developer Tools), hit the settings gear icon in the lower right corner, enable "Snippets support", restart. Open the Scripts panel, click the "navigator tree" icon on the left, and find an empty Snippets tab. My question is: What can I use this for? How can I populate this with snippets? In short, snippets are a multi-line console, an iterative JS development workflow, and a persistent

Command for loading jQuery on Google Chrome inspector?

阅读更多关于 Command for loading jQuery on Google Chrome inspector?

I remember seeing that there was a specific command you could put on Google Chrome's inspector console for it to load jQuery and allow you to execute jQuery commands. However, I cannot remember which command it was, and searching online only brings me unrelated results. Anyone knows which is that command? Thanks! EDIT: Years later I had realized that I was asking for the $$ function in the console. However, this is not jQuery but provides a similar selector option, most likely a shorthand for document.querySelectorAll . The answers here address adding jQuery for real, with all of its

is there a way to save css/js changes of remote resource between page reloads or map remote resource to local in devtools?

阅读更多关于 is there a way to save css/js changes of remote resource between page reloads or map remote resource to local in devtools?

I know about Workspaces recently introduced in DevTools but that is not that i need. For example: page uses jquery that is loaded from CDN, i modify jquery library code, press ctrl-s, reload page -> modifications are lost. Or i want to debug some site i don't have an ability to change files of. I don't want only save changes as in save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory , i want them to persist between page reloads. You got most of it, but here's the slight change: Make a change in the Styles pane (or in Sources), then click

Accessing iOS Safari Web Inspector from Windows Machine

阅读更多关于 Accessing iOS Safari Web Inspector from Windows Machine

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? It appears to require Safari 6, which has not been released for Windows. Regarding the unavailability of Safari 6 on Windows, Apple has stated "Safari 6 is available for Mountain Lion and Lion. Safari 5 continues to be

How to use chrome web inspector to view hover code

阅读更多关于 How to use chrome web inspector to view hover code

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? Travis Northcutt Now you can see both the pseudo-class style rules and force them on elements. To see the rules like :hover in the Styles pane click the small dotted box button in the top right. To force an element into :hover state, right click it. Alternatively, you can use Event Listener Breakpoints

Where to see font files loaded by chrome in the inspector?

阅读更多关于 Where to see font files loaded by chrome in the inspector?

问题 What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'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? 回答1: You can view the downloaded web fonts using the

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

阅读更多关于 Export CSS changes from inspector (webkit, firebug, etc)

问题 When I'm working with CSS, I'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'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 "export" or "copy", and have the contents available in my clipboard. Does something

Can you inspect element on a Samsung tablet's default Internet application

阅读更多关于 Can you inspect element on a Samsung tablet's default Internet application

问题 Is there any way of inspecting element on a Samsung tablet using the default Internet Application? I have some bugs that need sorting that only appear in the native Samsung / Android 'Internet' application. 回答1: Samsung Internet can be debugged remotely using Chrome on the desktop. Any pages you have open in Samsung Internet should be listed for inspection under chrome://inspect : As Ada shared here, you can also enable port forwarding and connect to a server running on your desktop machine.