Debugger appli web sur ios6 et mac…

=>SOURCE<=

Debugging

 

Enabling Web Inspector on iOS

Web Inspector provides valuable insight on what might be going wrong with your web content. Even though Web Inspector is accessed through Safari on OS X, you can use it to inspect content that has loaded in Safari or in any UIWebView on iOS.

bullet

To enable Web Inspector on iOS
  1. Open the Settings app.

  2. Tap Safari.

  3. Scroll down and select Advanced.

    image: ../Art/developersettings.png
  4. Switch Web Inspector to ON.

    image: ../Art/debugconsoleon.png

With Safari on iOS 6 and later, you can debug your mobile web content from your Mac. You can view errors, warnings, and logs for HTML, JavaScript, and CSS, just as you would when developing for Safari on OS X. This chapter describes how to use Web Inspector to debug web content on iOS.

You should test your web content on both the desktop and various iOS devices. If you do not have iOS devices for testing, you can use Simulator in the iOS SDK. Because there is a difference between web browsing on iOS and OS X, you should specifically test your content on iPhone and iPad or emulate the hardware device in Simulator. When testing in Safari on any platform, you can use Web Inspector to debug your web content.

For more tips on debugging web content in Safari, read Safari Developer Tools Guide. Read the section “Changing the User Agent String” in Safari User Guide for Web Developers to learn how to simulate iPhone- and iPad-like behavior in Safari on OS X.

Enabling Web Inspector on iOS

Web Inspector provides valuable insight on what might be going wrong with your web content. Even though Web Inspector is accessed through Safari on OS X, you can use it to inspect content that has loaded in Safari or in any UIWebView on iOS.

bullet

To enable Web Inspector on iOS
  1. Open the Settings app.

  2. Tap Safari.

  3. Scroll down and select Advanced.

    image: ../Art/developersettings.png
  4. Switch Web Inspector to ON.

    image: ../Art/debugconsoleon.png

Inspecting From Your Mac

When Web Inspector on iOS is enabled, connect your device to your Mac with a USB cable. A menu item in the Develop menu of Safari on OS X appears, as shown in Figure 12-1.

Figure 12-1  The Develop menu

Console displays banner on webpage

The name of the menu item will be either the name of each device connected and/or the name of the Simulator. A submenu containing each available page for each inspectable app appears. Select the page that you are interested in, and Web Inspector opens in a new window.

The same interface and workflow to debug web content on OS X is used to debug web content on iOS, as shown in Figure 12-2.

Figure 12-2  Web Inspector

Console displays banner on webpage

All of the Web Inspector’s features on OS X—such as timing HTTP requests, profiling JavaScript, or manipulating the DOM Tree—are available on iOS as well. The sole difference is that by selecting your web page through the Develop menu, you actively inspect web content on your device instead of on your Mac. If you browse to another URL on your device with the Inspector window still open, you’ll notice that the inspected data reloads to reflect the page to which you navigated.

Inspecting Content in a Web View

If you have a development provisioning profile installed on your device, you can debug any web view (UIWebView object) in your app. This is particularly useful if your app manipulates the DOM on the fly and you want to observe the generated code.

To inspect a UIWebView, make sure that your app is open to the desired view so it appears under the Develop menu. The name of your app will appear under the name of your device. When debugging web content in a web view, Web Inspector behaves in the same manner as debugging web content in Safari.

Using JavaScript to Interact with Your Device

You can communicate to your device from your Mac by sending JavaScript commands with the interactive Web Inspector debug console. Through the debug console you have access to variables, functions, and the DOM tree of the page being inspected. As you start typing, notice that acceptable values autopopulate. Press Return to send your command, and you receive a response, as shown inFigure 12-3.

Figure 12-3  Observing the value of document.title in the debug console

Developer console messages

Conversely, you can create messages on your device and send their values to your Mac for observation. Throughout your JavaScript code, you can call the log()warn(), and error() methods of theconsole object. Pass an object containing any runtime variables you are curious about. In this way, you can determine the value of an object at any stage of the loading process, instead of just at the end via the debug console. For example, the following code prints the value of a variable to the console using the log() method:

console.log("The current value of myVariable is " + myVariable);

Observe the output of console logs, warnings, and erros in the Log navigator (control-8).

Not only can you pass messages back and forth between iOS and OS X but you can also trigger functions on your device from your Mac. The example shown in Figure 12-4 calls window.alert(), but you can call any top-level function available to the webpage, including functions of your own. This behavior is useful if you want to closely examine the implementation of your code programmatically instead of through a user interface.

Figure 12-4  Alert dialog triggered from the debug console

Developer console messages

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s