We’re rewarding the question askers & reputations are being recalculated! Read more.
51

Just enable Show Developer Menu in Safari's Preferences, Advanced tab. It will enable the option Inspect Element when you right click the page. You can also start it with Command+Option+I. You can get more info about this option in Safari for Developers - Tools and Safari Web Inspector Guide: The Develop Menu.


7

More than likely, you've used the Inspection Tool and have an element highlighted. The $0–$4 variables contain the current and previous selected nodes from the Elements Tree Hierarchy. source: https://webkit.org/blog/829/web-inspector-updates/ Chrome, Firefox, Opera, Safari - If you have an element currently selected in your "Elements" tab, you can ...


7

I can't understand if your app do a XmlHTTPRequest. Anyway... in the resource section (red circle in the image) you can find all the information about a request, even its response. Hope this will help you! :) PS: Sorry, my GUI is in italian, but you will understand as well


3

Either inline in your HTML, or in an external Javascript file. Call the function console.clear(); Now, every time you go to reload your page, the console will be cleared.


3

If you click on Network Requests (in recording mode) you will see list of all request in the table. If you select a row it is highlighted in the resource section. Clicking on it will show its body.


3

To inspect the underlying code of a message, you can use View > Message > Raw Source.


3

This indeed looks to be a bug. You can watch all file access on your system with the opensnoop command. This requires root access - run it, then try hitting the download button - you'll see no access from Safari. Time to hit Feedback Assistant and tell them what's going on! The earlier comment is a good workaround - once the image is displayed, just hit ...


2

Right-click an element, then choose Inspect Element. This opens the developer tools and selects the element in the DOM. This can be scripted with Automator/Keyboard Maestro/etc for activation with a keyboard shortcut if you wish.


2

I found this app, but not sure how extensive is it compared to a traditional web inspector Ergo Web Tools by James Finley https://appsto.re/us/3vdC_.i Let me know if you've found an alternative or something


1

You may try the Gear browser. It can inspect elements, view source, pickup color, full-screen snapshot, and more, and also available on both iPhone and iPad. https://gear4.app


1

I have been using MIHTool: https://www.mihtool.com/ - It’s not quite as good as being on Chrome on a Desktop but it gets some of the job done! I also use Inspect Browser https://itunes.apple.com/us/app/inspect-browser/id1203594958?mt=8


1

Probably you enabled "Force Print Media Styles" (a small printer icon in the upper right corner under the Elements tab):


1

I also have experienced this problem. After doing some research I finally manage to solve the problem. Backup and remove ~/Library/WebKit/com.apple.Safari folder. A problem should disappear after that operation. Enjoy :D


1

Use Option + up or down arrow, the list of inspector shortcut can be found here. https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/KeyboardShortcuts/KeyboardShortcuts.html


1

This sounds like a bug. Please file a bug report with a test case/URL and steps to reproduce at https://www.webkit.org/new-inspector-bug and we will take a look at it!


1

Very easy. Get a copy of Parallels or VMware Fusion. Set up a virtual machine and install Mavericks on it. You will then have all the benefits of running Safari 7 in the original environment without having to dust the hardware. I have Fusion, and virtual machines back to 10.5 Leopard. Also have Windows back to W98, and DOS 6 just for Duke Nukem in all it's ...


1

Disable Caches is for Safari on OS X, not for Safari on your connected iOS device. You can't disable caches on Safari on iOS.


1

$0 - $4 The $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel. $0 returns the most recently selected element or JavaScript object, $1 returns the second most recently selected one, and so on.


1

Found it - a bit hidden its at the bottom of preferences - advanced, i.e. "Show Develop menu in menu bar"


1

I recommend using firebug. It is one of the most useful tools for me as a web developer. It works in safari. And I can't say enough about it. By the way, I'm in no way affiliated with firebug.


1

Silverlight is a plug in that draws all content outside the DOM so any normal web tools to introspect how a page loads will fail (and in this case, fail without much grace). You will get similar problems if you try to "debug" a netflix or hulu stream or other streaming content that relies on a plug in as opposed to HTML and CSS and Javascript (for example) ...


1

I have just fixed precisely the same problem on a site. Its annoying when a debugger chokes so it can't help you find the problem! My problem was caused by a stray class making its way into a style. <div style="background: #ffb380; padding-bottom:30px; width:300px; text-center;"> Removing the text-center fixed the problem and web-inspector loads ...


1

Web Inspector doesn't show network traffic for legacy plug-ins. It is simply not reported to the user interface, which is why you can't see it. Feel free to file a bug about this at: https://www.webkit.org/new-inspector-bug


Only top voted, non community-wiki answers of a minimum length are eligible