#mobilesafari webdev

[webqs-blog]

Saving CSS and JavaScript changes made in the Safari Web Inspector

Q: I just made a bunch of changes to my CSS and JavaScript in the Safari Web Inspector. Is there any way to save them?

A: Yes!

You're probably tweaking your CSS values in the right sidebar of the Web Inspector, under the Rules pane. The DOM Tree view is likely showing in the center panel, like so:

After you've changed a style, click on the name of your CSS file in the Resources list on the left, or click on this file name next to the CSS style you were just editing:

This will switch the center panel from the DOM Tree to the Source Editor view. The changes you have previously made under the Rules panel in the right sidebar will be reflected in the source view. Here's what I see while making changes to the subtitle color and background color:

Then after I click the CSS file name, I see those changes reflected in the Source Editor view:

Press cmd-s to save. A Save panel will come up, and it will ask you if you want to replace the CSS file that's already there. You do!

From this point on you can press cmd-s and the changes will be saved silently, without the Save panel prompt. If you open a new window and begin inspecting, changing, and saving again, you'll get that initial Save panel prompt again. 

The same thing works for JavaScript changes. Switch the center panel to the Source Editor view by clicking on a JavaScript file name, make changes to your source code, then press cmd-s to save.

Here's a set of files to test with, if you'd like to try this out.

Bonus: Keep your CSS or JS file open in a text editor that live updates changes from disk, while working and saving in the Web Inspector. That way, if you save in the Web Inspector but realize you made a mistake, you can switch to your text editor and Undo (press cmd-z) to easily get back to the previous state.

Tweet

// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]>

[webqs-blog]

Debugging web pages in Safari on iOS

Q: Can I debug a web page in Safari on iOS? Not in an emulator, on my actual device?

A: Yes! You can use the Web Inspector in Safari on OS X to debug a web page that's loaded in Safari on your iPhone or iPad.

First, you have to enable the Web Inspector on your iOS device. Navigate to Settings -> Safari -> Advanced (all the way at the bottom), then toggle the switch for Web Inspector to ON.

Just as the Advanced panel above says, connect your iOS device to your OS X machine with a cable. Load a web page in Safari on iOS, then open the Develop menu in Safari on OS X (if you don't see this menu, enable it in Safari Preferences -> Advanced -> Show Develop menu in menu bar).

In the Develop menu, you should see the name of your device, plus any inspectable URLs (usually the frontmost "tab" in Safari on iOS, at least). 

Select a URL from the list. When you hover over a list item, the page that corresponds to the URL you're selecting will be highlighted with a blue overlay on your iOS device (below, left). When you click a URL in the list, a Web Inspector window will open on OS X (below, right).

From this point on you can inspect, debug, profile, etc your web page on iOS as you typically would, using the Web Inspector window that is open on OS X.

Note that as soon as the Web Inspector window opens, the blue overlay that covers the entire page will disappear. Now, an overlay will be shown over whatever web page element you're inspecting. You can easily select an element to inspect — first click the Inspect crosshairs in the Web Inspector on OS X, then tap an element in the web page on your iPad or iPhone.

For example, here I clicked the Inspect crosshairs (above), then tapped the title "CSS Transforms" in the web page on my iPhone. The Web Inspector on OS X has automatically selected and revealed that element in the DOM Tree view.

Happy debugging! 😊💃

More info:

Safari Web Inspector Guide

Tweet

// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]>