http://hanho9.cafe24.com 나오는 2번에 스크립트 경로를 아래에 스크립트에 적용후
javascript:(function(e){e.setAttribute("src","http://debug-software.intel.com/target/target-script-min.js#anonymous");document.getElementsByTagName("head")[0].appendChild(e);})(document.createElement("script"));void(0);
실제 디버깅할 곳에 삽입
------------------------------------------
http://debug-software.intel.com/
http://debug.phonegap.com/
Tutorial-UsingDebugMobi.pdf
Intel® HTML5 Development Environment
Tutorial – Using App Debugger
v1.05 : 03.06.2013 Tutorial – Using App Debugger v1.05 : 03.06.2013
Legal Information
INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE,
EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS
GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR
SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR
IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR
WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR
INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT.
A "Mission Critical Application" is any application in which failure of the Intel Product could result,
directly or indirectly, in personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S PRODUCTS
FOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS
SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND THE DIRECTORS, OFFICERS, AND EMPLOYEES
OF EACH, HARMLESS AGAINST ALL CLAIMS COSTS, DAMAGES, AND EXPENSES AND REASONABLE
ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY,
PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION,
WHETHER OR NOT INTEL OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR
WARNING OF THE INTEL PRODUCT OR ANY OF ITS PARTS.
Intel may make changes to specifications and product descriptions at any time, without notice.
Designers must not rely on the absence or characteristics of any features or instructions marked
"reserved" or "undefined". Intel reserves these for future definition and shall have no responsibility
whatsoever for conflicts or incompatibilities arising from future changes to them. The information here
is subject to change without notice. Do not finalize a design with this information.
The products described in this document may contain design defects or errors known as errata which
may cause the product to deviate from published specifications. Current characterized errata are
available on request. Contact your local Intel sales office or your distributor to obtain the latest
specifications and before placing your product order. Copies of documents which have an order number
and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-548-
4725, or go to: http://www.intel.com/design/literature.htm
Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries.
*Other names and brands may be claimed as the property of others.
Microsoft, Windows, and the Windows logo are trademarks, or registered trademarks of Microsoft
Corporation in the United States and/or other countries.
Copyright © 2013, Intel Corporation. All rights reserved. Tutorial – Using App Debugger v1.05 : 03.06.2013
1.0 Purpose
The purpose of this documentation is to demonstrate how to use the App Debugger tool to remotely
debug HTML5 code over the Internet. The App Debugger tool is based on an open source tool called
“Web Inspector Remote”* (WEINRE) that provides remote Web debugging for mobile devices.
However, App Debugger is a configuration-free hosted version of that software that anyone can use for
free across the Internet.
2.0 How to Use App Debugger
To use the App Debugger tool, browse to http://debug-software.intel.com in your Google* Chrome web
browser.
A unique identifier is generated automatically for you. If you were returning to App Debugger after
debugging previously, you might instead enter your current unique ID.
Once you have determined the unique id that will be used for the current debugging session, make sure
that your HTML5 project has the listed script included in it. It could go anywhere, but for consistency it
is typically placed just after the closing body tag in your HTML document.
<html><body></body>
<script src="http://debug.html5m.com/target/target-script-min.js#ac4928aa-418b-d4c8-
5839-1a6b278c0146"></script></html>
Next, click the link to start App Debugger on your Chrome* browser. That will bring up a remote page
that looks something like this: Tutorial – Using App Debugger v1.05 : 03.06.2013
There are no targets yet. Once the JavaScript* library is loaded into an HTML5 page, that page will show
up as one of the available targets in just a few seconds.
Tutorial – Using App Debugger v1.05 : 03.06.2013
Once the target has fetched the WEINRE JavaScript from the server, executed it, and made a good
contact back to the App Debugger server, the Target will turn green.
If you have several Targets, select the one you want to view. You should then be able to use Chrome’s
debugging tools similar to how one would use those tools to debug local JavaScript. Switch to the
Console view within Chrome to see the console.log messages coming from the remote JavaScript.
Tutorial – Using App Debugger v1.05 : 03.06.2013
3.0 Finding Bugs
The App Debugger tool can help you to find bugs in your remote JavaScript/HTML code in several ways.
3.1 Capture console.log calls
Any JavaScript messages logged to the console using console.log will make their way to the App
Debugger console window. That can save you the heartache of having to write messages to the screen
as a debug log or putting up a load of annoying alert boxes. In the example below, the HTML5 program
running on the right is transmitting its console.log calls to the App Debugger window on the left.
3.2 Adjust CSS on the Fly
The App Debugger window also gives you the ability to change CSS elements and immediately see the
results on the client side. In the example below, the CSS for the title page is adjusted and the result
plays out immediately on the client window to the right. Tutorial – Using App Debugger v1.05 : 03.06.2013
3.3 Adjust JavaScript on the fly
The App Debugger window gives you the ability to write JavaScript and have it executed immediately on
the client side. In the example below, the canvas tag which includes the kung-fu fighter is set to be
transparent, making him appear ghostly in the right window.
Tutorial – Using App Debugger v1.05 : 03.06.2013
3.4 Inspect HTML
The App Debugger tool allows you to inspect HTML elements. Highlighting the HTML code in the App
Debugger window will highlight the element on the client side. In the example below, the HTML
element for the title is selected for inspection which highlights it in the right-hand execution window.
4.0 More Information
For more information, check out a quick demonstration video here:
http://youtu.be/k0t2oZKpmA8
The App Debugger service is also available as a Chrome extension here:
http://tinyurl.com/debugmobi-chrome
For a more detailed explanation of how WEINRE works link here:
http://muellerware.org/papers/weinre/manual.html
