Build and debug websites and web applications for mobile devices can be a difficult task. On the desktop, we have powerful tools for debugging; most browsers have a web inspector. But we don't have tools for devices like iPhone and iPad ... that is, until now!
With the recent release of Safari 6 and iOS 6, you can now use the web inspector to build and debug websites on your desktop and mobile Safari. How? The setup process is simple. Follow this tutorial and you have very powerful mobile debugging tools at your fingertips almost instantly.
Modern tools for browser developers have been of immense help in building websites and web applications. Chrome has. Fire Fox? ... Safari? Web inspector. All extremely powerful tools in web development.
Be that as it may, up to this point, debugging websites and web applications on mobile devices has been a difficult task. Since Safari and Chrome run on the webkit engine, there are many similarities in how the desktop and mobile browser display the web layout. As such, most designers / developers create and customize their websites on the desktop using one of these browsers, assuming that the webkit engine will result in the page looking the same on a mobile device.
However, mobile and desktop platforms are actually completely different. They have different memory capacities, performance potential, input devices and network connection... Therefore, it has become imperative that the designer's debugging tools for mobile devices become more efficient and consistent with their desktop counterparts.
New software versions Apple for iOS 6 and Safari 6 have brought many features of debugging tools to desktop computers that we all know and love from mobile devices. This tutorial will show you a simple process for getting settings for debugging mobile sites using the Safari web inspector.
Pay attention to compatibility first: for Windows users There are several bad news... You can only debug Remote Web Inspector on Mac. Safari 6 for Windows is not available. Also, Safari 6 is only available for Mac computers with OSX Lion or higher.
Methods for using web inspectors
There are two methods for using the web inspector in mobile Safari:
- Real device method: use a real iDevice (iPhone, iPad, etc.) connected to your computer via USB
- Virtual device method: use the iOS simulator which is part of Xcode
We'll go over both of these methods and choose the one that's best for your situation.
Step 1. Make sure you are in the know
Since debugging mobile devices with a web inspector is new function you need to make sure you have the latest software.
Real method devices: to use the web inspector in tandem with a real iDevice, you need the following:
- IDevice (iPhone, iPad, iTouch) running under iOS control 6
- USB cable
- Safari 6
To use the web inspector in tandem with the iOS simulator, you need the following:
- Safari 6
- Mac OSX Lion (10.7.4) or higher
- Xcode 4.5 with iOS 6 SDK (available in the app store)
Version check software: to check if you are using iOS 6 on your iDevice, go to "Settings> General> About" on your device.
To check if you are using Safari 6, open the Safari toolbar and click Safari> About Safari.
To make sure you are using Lion click on Apple logo in the menu bar and select "About this Mac"
To make sure you are using correct version Xcode, open Xcode and choose "Xcode> About Xcode"
Step 2. Enabling developer tools
You must enable developer tools and web inspector on desktop and mobile Safari versions.
Real device method: if you are going to use real device, connect it to your Mac via USB.
Virtual device method: if you are going to use the iOS simulator, open Xcode then click right click mouse over the dock icon and select "Open Developer Tool> iOS Simulator".
Mobile Safari: on your real iDevice or iOS simulator go to Settings> Safari> Advanced and enable Web Inspector.
Desktop Safari: if you haven't already, make sure your Safari developer tools are enabled. You can verify this by opening "Develop" in the menu bar.
If you don't see "Develop" in the menu bar, go to the menu bar and click "Safari> Preferences> Advanced" and check the box "Show develop menu in menu bar".
Step 3. Check your website
Now that you have iOS Simulator open or your iDevice is connected to your Mac via USB (or both!), You're ready to start using the web inspector on your site.
On your Mac, open Safari and go to the "Develop" section. You should now see any iDevices (virtual or real) that you have connected and launched with your mac. In the screenshot below, you will see that I have two devices in the menu, one is an iOS simulator and the other is real iPhone connected to my mac.
To start checking a website, you must have mobile Safari running on your device with one of the tabs open for the website. If you do not have mobile Safari, you will see a "No Inspectable Applications" message.
To start testing, simply enter the URL of the page you want to test in mobile Safari and then select that site from the Develop menu. You can start checking sites on your real iDevice or iOS simulator. When you select a page, a blue overlay appears on the page indicating your selection.
With a site selected, the Safari web inspector will open and allow you to start inspecting your website. Here it is!
Conclusion
Now that you have the Safari web inspector at your fingertips, you have a lot more control when building and debugging websites and web applications.
Below are examples of some of the things you can now do when debugging mobile sites:
- Make changes to HTML and CSS.
- See how your site / app is performing, including browsing details O JavaScript events and network requests.
- Debug JavaScript using breakpoints and other tools.
- View warnings and errors.
- Open the console.
- Search for the DOM.
- Browse site repositories.
You have the tools, go and build!
Knows that in standard browser Safari is present hidden menu « Development of". In this article, we will talk about the capabilities of this section.
In contact with
What's the Develop menu in Safari on Mac for?
First of all, this menu will be useful for web developers who need access to code, various options for displaying pages, disabling content, and so on. There are also several useful features for ordinary users.
From this menu you can quickly launch current page in any other browser installed on the Mac. Very handy if Safari cannot play any multimedia content. For example, if you want to watch a VR movie (for glasses virtual reality), then Google Chrome is much better suited for this purpose.
No less interesting function will become display mode program code pages. Why might this be necessary? There is a tab “ Resources", Thanks to which it will not be difficult to download an image that does not respond to clicking right key mice.
The function of clearing or disabling the cache is also useful. And sometimes there is a need to turn off the display of images or scripts.
Web designers will figure out the menu tools themselves " Development of", But I would like to separately note the possibility of starting the mode responsive design... It displays the quality of the website page optimization, depending on what device it will be launched on and with what resolution.
How do I enable the Develop menu in Safari on Mac?
1 ... Launch Safari. On the menu bar, select a section Safari -> Preferences or press the keyboard shortcut Command (⌘) +, (comma).
2 ... Go to the " Supplements».
3 ... At the very bottom, check the box next to the item “ Show Developer menu in menu bar».
Everything! After these actions, the menu bar will display new section « Development of».
V Safari browser Several developer tools are included to make it easier to build and debug your site. For example, through Safari, you can see how the site will look on the iPhone and iPad. To do this, you just need to specify the appropriate user agent through the Develop menu (Fig. 7.51).
Rice. 7.51. Choosing a user agent
Safari also has a great tool for debugging HTML and CSS code called the web inspector. To call it, select the menu Development> Show Web Inspector or use the keyboard shortcut Ctrl + Alt + I. If you do not have this menu item, go to the browser settings, select the Add-ons panel and check the box "Show Development menu in the menu bar".
The web inspector lists the resources found on the web page - documents, style sheets, images, and scripts. Allows you to see and find the web page code and style properties of elements. The web inspector interface is shown in Fig. 7.52. Of all the richness of the program's features for layout, we are only interested in the Elements menu.
Rice. 7.52. Web inspector
The interface of the web inspector resembles Firebug - the HTML code is shown in the left pane current document, v right panel- the style of the selected element. Any element on the page can be selected not only through code, but with the help of a tool, it allows you to select an element by simply clicking on it.
The set of styles in the inspector is presented as a drop-down list, this allows you to compactly include large volume information. The first item "Computed Style" (Fig. 7.53) contains the element style that sets the browser based on own style, accounting for inheritance and added properties.
Rice. 7.53. Computed style
These styles are provided for information only, you cannot change anything in this paragraph. A color, if present, can be clicked on and formatted to Hexadecimal, RGB, or HSL.
The next item "Style Attribute" shows the inline style, that is, the one that is specified through the style attribute. The item will be empty if there is no such style.
The underlying group of items shows the style of the current element and related elements (Fig. 7.54).
Rice. 7.54. Element style
Any property in this list can be edited by clicking on it. Universal properties like padding or margin are displayed as a drop-down list, which lists individual properties, such as padding-left, padding-top, etc. Opposite each property is a checkbox that allows you to quickly disable the property. You can add a new rule using the menu hidden behind the gear in the right upper corner panels (fig.7.55).
Rice. 7.55. Menu for adding new rules
The item "Dimensions" demonstrates block model element - the width and height of the elements, as well as the values of padding, borders, margins and positioning (Fig. 7.56).
Rice. 7.56. Item dimensions
You just need to take into account that indents are called here padding properties, and the margins, i.e. on the contrary, and not in the usual sense.
This item can be used not only to determine the desired values, but also to set them. It is enough to double-click on the desired value and enter a number. There is no need to specify units, pixels are accepted by default.
Starting with Safari on iOS 6 and up later versions you can debug mobile web content from your Mac. You can view JavaScript errors, edit HTML attributes, change CSS properties, just like when developing for Safari on OS X. This section describes how to use the web inspector to debug web content on iOS.
You should check your web content on both desktop systems and different devices iOS. If you don't have iOS devices for testing, you can use the iOS Simulator from the iOS SDK. Since there is a difference between webpages on iOS and OS X, you should specifically test your content on iPhone and iPad, or emulate hardware device in the simulator. When testing in Safari on any platform, you can use the Web Inspector to debug web content.
Enabling Web Inspector on iOS
The web inspector contains valuable information about what might be going wrong in your web content. Even though the Web Inspector is available through Safari on OS X, you can use it to inspect content that loads in Safari or any UIWebView on iOS.
Enabling the Web Inspector on iOS
- Open the settings
- Select Safari
- At the very bottom, select Add-ons
- Turn on Web Inspector
Inspect from your Mac
When Web Inspector on IOS is enabled, connect your device to Mac using USB cable... A menu item appears on the OS X Safari Development menu, as shown in the image below. If the device name does not immediately appear on the Develop menu, try restarting Safari and / or reconnecting the cable.
The menu item name will be either the name of each device connected and / or the name of the simulator. Submenu with pages available in iOS Safari... The application must be running on foreground to appear in the Develop menu. Select the page that interests you and the Web Inspector will open in a new window.
All features of the Web Inspector on OS X, such as time HTTP requests, JavaScript profiling, or DOM tree manipulation are also available on iOS. The only difference is that by selecting your web page from the Develop menu, you are actively checking web content on your device, not your Mac. If you navigate to a different address on your device with the Window Inspector still open, you will notice that the inspected data will reload to reflect the page you navigated to.
It showed how you can extend Safari's capabilities with third-party plugins and utilities. However, your possibilities do not end there. You can access Safari options that are usually reserved for developers. To do this, just start the Terminal program, enter from command line just one command, after which you will have access to a whole world of new opportunities - incredible and invaluable.
When setting up Apple products according to personal needs, you may notice that many of the suggested recipes have and reverse side, i.e., costs. For example, you can flash your phone, but then find that subsequent software updates will not work. You can keep your home folder on your iPod, but you'll need to connect your iPod every time you need to use your computer. It's just two specific examples, but general rule looks something like this: what more work requires any modification, the higher the recoil. Let's illustrate this with another example: you can do real miracles with Terminal, but for this you have to learn an impressive number of commands and their options.
Perhaps the only exception to this rule is the Debug menu in the Safari browser. Activating the Debug menu in Safari is extremely simple, the benefits are countless, and there are no negative side effects. That is, from a hacker's point of view, this recipe only offers benefits. Given its simplicity, let's put it into practice. As mentioned earlier, all you need to do is launch the Terminal application and enter the following command from the command line:
1defaults write com.apple.Safari IncludeDebugMenu 1Nothing happens in the Terminal application after running this command. If, at the same time, the Safari browser was opened, then, at first glance, it may seem to you that the command had no effect. However, it is not. To see the changes made as a result of running the command, close Safari and then restart it - and you will see that the menu bar appears new team- Debug (fig. 2.14).
As soon as you activate the Debug menu, you will find that this menu opens you many earlier unavailable options Safari. Most of the options are only of interest to developers. However, some of them might really please you. Want to know, for example, how much resources are consumed by surfing the Web with Safari? The easiest way to get an answer to this question is to use the Start Stress Test option from the Debug menu. Once you select this command, Safari will go to http://del.icio.us and start loading page by page, while tracking the amount of work that has been done (Figure 2.15).
This allows for more than just estimating the traffic volume of Safari. For those users who are too lazy to search for interesting Web pages on their own, the Safari stress test will always find a couple of pages that might be of interest. To end the stress test, open the Debug menu again and select the Stop Stress Test command. Less interesting, but no less useful compared to the Safari stress test, is the ability to select a user agent from the Debug menu. This will allow you to use Safari by impersonating the servers as a different browser. At first glance, this feature appears to be a problematic function of dubious utility. Why bother presenting to servers as another browser?
After all, you are proud to be mac user! But one should not rush to conclusions. Sooner or later you will come across a site that requires all visitors to use Internet Explorer... If you openly tell such a server that you are using Safari, you may think that you are out of luck - you will be denied service. If Safari pretends to be Windows MSIE 6.0, then you will be allowed to register and receive the desired service, since the site providing the service will be misled and "believe" that you are one of Windows clients(fig. 2.16).
However, this does not necessarily mean that the site will miraculously start working correctly with Safari. If a site uses ActiveX, then Safari will not be able to work with that site, no matter how well the application masks its identity. However, there are many sites that only support Internet Explorer (IE) due to the laziness or negligence of the code developers. This, we emphasize, is not happening because Safari cannot properly render information and interact with the servers, but because the webmaster went to easy way and decided that it would be easier for him to only support Internet Explorer. In such cases, replacing the user agent through the Debug menu will help you, which will allow you to access sites that were previously inaccessible to you.
A lot more can be accomplished with a user agent. For example, if you want to achieve more quick view, you can tell the servers that you are using Mobile Safari 1.0 - thus impersonating iPhone user... Some pages open only for Mobile users Safari (the classic example is http://reader.mac.com/) and many other sites automatically move Mobile Safari users to lower bandwidth pages. For example, Amazon redirects Mobile Safari users to a less bandwidth-hungry, simpler-looking page (Figure 2.17).
If no user agent tricks can help you achieve the desired result, the Debug menu will still at least save you the hassle of looking for a suitable browser in the Applications folder. If you find yourself on a problematic site that won't open with Safari, choose from the menu Debug commands→ Open Page With… and then select from the list suitable browser(fig.2.18).
However, the capabilities provided by the Debug menu don't end with user agent tricks. When you activate the Debug menu, you have an amazingly versatile and versatile site inspection tool at your disposal. With its help, you can explore any element of the page that interests you, and the display of the code will fully reflect the level of nesting, and will also use the color highlighting of syntax elements for added convenience. To launch the Web Inspector for the entire page, you need to go to the menu bar (Debug → Show Web Inspector), but if you are not interested in the entire page, but only in some of its elements, then you just need to hover the cursor over required element, right click and select from context menu Inspect Element command. You will see exactly the part of the page that you needed to explore (Fig. 2.19).
Finally, the Debug menu provides many other options. For example, you can turn off RSS support if you are reading RSS feeds. Mail app or independent means RSS Readers such as NetNewsWire. In addition, with the Debug menu you can achieve interesting visual effects- for example, make the Safari window transparent (Fig. 2.20).
There are many more interesting options, which, however, will be of greater interest to developers - for example, memory leaks (world leaks), profiling (profiling), etc. However, one of the most useful options which can be found in the Debug menu are big list Safari keyboard shortcuts. These keyboard shortcuts are listed in a file that few users know about. Moreover, if you use them correctly, keyboard shortcuts can greatly save you time when working intensively with the browser (Fig. 2.21).
If you do not intend to activate the Debug menu, but still need access to all these handy keyboard shortcuts, enter the following file path in the browser address bar: file: ///Applications/Safari.app/Contents/Resources/ Shortcuts.html and bookmark it. The keyboard shortcut file is local file stored in the Safari package, but it's much easier to access it through a browser than wasting time sequentially expanding folders and packages to find the information you need.
Having activated the Debug menu in Safari, it would be logical to ask if this hidden opportunity and in others Apple apps... Agree, it would be great if you were able to treat any application the way the developers do. Unfortunately, not all applications have a hidden Debug menu, although some do. For example, try the same operation as described in this recipe for the iCal app — you will also find the Debug menu, albeit with less functionality than Safari. Finally, in conclusion, it should be said that if you want to hide the Debug menu again, you just need to launch the Terminal application and issue the following command:
1defaults write com.apple.Safari IncludeDebugMenu 0
