'웹 원격 디버깅'에 해당되는 글 1건

  1. 2014.04.02 하이브리드앱 원격 디버깅
98..Etc2014. 4. 2. 00:35
반응형

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 

 

 

Posted by 1010