코르도바 앱을 디버깅 할 수있는 실제 솔루션이 있습니까?
지난 이틀 동안 Cordova 3.2를 사용하여 생성하고 Android 2.3 장치에 배포 한 HTML5 앱을 디버깅하는 방법을 알아 내려고 노력했습니다. 내가 본 모든 기사 / 게시물은 실제 솔루션보다는 해킹을 제공합니다 : (그리고 대부분의 경우 내 경우에는 작동하지 않습니다 .CSS 스타일과 내 앱 내부의 Angularjs 코드를 디버깅하십시오 ..
지금까지 테스트했습니다.
debug.phonegap.com
스크립트를 index.html파일에 삽입 한 후 debug.phonegap.com에서 생성 된 URL을 방문했지만 아무 일도 일어나지 않습니다. 빈 페이지 만
와인 레
내가 찾은 대부분의 기사는 Jar 파일을 계산하는 구식 Github 저장소를 가리키고 있습니다.
가장자리 검사
그것은 작동하고 모바일 내 PC에서 탐색하는 웹 페이지를 보여줍니다. 그러나 문제는 phonegap 앱을 실행하는 브라우저와 다른 통합 브라우저 (또는 에뮬레이터)를 사용한다는 것입니다. 결과가 정확하지 않습니다.
크롬 에뮬레이터
Edge inspect와 동일합니다. Android 2.3과 함께 제공되는 실제 웹 키트 v530을 볼 수 없습니다.
꿈의 솔루션
완벽한 솔루션은 데스크톱 브라우저를 Android 2.3 플랫폼과 동일한 브라우저로 전환 할 수있는 Chrome (데스크톱)의 확장입니다. 웹 에뮬레이션 v 530을 사용하는 브라우저 자체만으로 에뮬레이션이 필요 없습니다.
불행히도 그러한 해결책은 존재하지 않습니다 :( 또는 내가 틀렸습니까?
어떤 제안?
안드로이드 용 :
당신은 당신의 안드로이드 장치 내에서 "USB 원격 디버거"를 활성화하고 USB 케이블로 연결해야합니다. 그런 다음 장치에서 응용 프로그램을 엽니 다. Chrome은 원격 브라우저를 감지하며 Chrome을 로컬로 사용할 때와 동일한 방식으로 콘솔을 볼 수 있습니다.
chrome://inspect/#devicesChrome 브라우저 에서이 링크를 사용하십시오 (탐색 모음에 붙여 넣어야 함).
앱이 기기에서 충돌하는 경우 브라우저 내에서 콘솔 로그 만보고 어떻게되는지 확인하면됩니다. 또한 로컬 브라우저에서와 동일한 방식으로 기능을 추가하고 변수를 변경하며 함수를 재정의 할 수 있습니다.
수행 할 단계에 대한 자세한 내용은 이 기사 를 읽으십시오 .
Android 4.4 이상을 실행하는 기기에서만 작동합니다.
iOS의 경우 :
iOS 용 Safari를 사용하려면 다음 단계를 수행하십시오.
1. iOS 기기에서 설정> Safari> 고급> 웹 검사기로 이동하여 웹 검사기를 활성화하십시오
2. iOS 기기에서 Safari를 엽니 다.
3. USB를 통해 컴퓨터에 연결하십시오.
컴퓨터에서 Safari를 엽니 다.
5. Safari의 메뉴에서 개발로 이동하여 장비 이름을 찾으십시오.
6. 디버깅하려는 탭을 선택하십시오.
주의
이 답변은 구식 (2014 년 1 월) 이후 많은 새로운 디버깅 솔루션을 사용할 수 있습니다.
나는 마침내 그것을 작동시켰다! weinre와 cordova (Phonegap 빌드 없음)를 사용하고 동일한 문제에 직면 할 수있는 미래 개발자를위한 번거 로움을 줄이기 위해 YouTube 자습서를 만들었습니다 .)
Android 4.4 이상 기기를 사용할 수 있으면 앱의 내부 WebView에서도 Chrome 원격 디버깅을 사용할 수 있습니다. Weinre보다 훨씬 나은 디버거이지만 최신 Android 버전을 사용하고 있습니다.
최신 Cordova 빌드는 디버그 빌드 인 경우 (--release 빌드에서 해제 된 경우) 이러한 종류의 디버깅을 자동으로 활성화합니다.
나에게 가장 좋은 것은 Chrome 디버거를 연결하는 것입니다.
이를 위해서는 에뮬레이터 또는 장치에서 $ cordova 에뮬레이션을 사용하여 앱을 실행하십시오.
그런 다음 Chrome을 열고 chrome://inspect/
실행중인 앱이 포함 된 목록이 표시됩니다. 앱이 있어야합니다. "검사"를 클릭하십시오.
개발자 도구가 포함 된 새 창이 열립니다. 거기에서 "콘솔"을 클릭하여 오류를 확인할 수 있습니다
앱에서 Cordova 3.3 이상을 실행 중이고 기기에서 Android 4.4 이상을 실행중인 경우 Chrome 원격 웹뷰 디버깅 을 사용 하여 Cordova 앱을 디버깅 할 수 있습니다.
그렇게하려면 먼저 휴대 전화에서 USB 디버깅을 활성화해야합니다.
그런 다음 "장치 검사"탭을여십시오. Chrome에서 설정 > 추가 도구 > 기기 검사로 이동합니다 .
컴퓨터에 연결된 상태에서 장치에서 앱을 시작하면 장치 목록에 웹뷰가 나타납니다. Webview의 "검사"링크를 클릭하면 Webview에 대한 디버그 도구가 나타납니다.
수행 방법을 자세히 설명하는 기사는 다음과 같습니다. http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/
'GapDebug' 를 사용해 보셨습니까 ? 무료입니다.
OS X 및 Windows에서 통합 디버깅 환경을 제공하기 위해 Safari Webkit Inspector 및 Chrome Dev Tools 버전을 통합 한 것으로 보입니다.
Another option is Visual Studio, which has prerelease support for debugging Cordova apps:
Unified debugging experience. Cross-platform development often requires a different tool for debugging each device, emulator, or simulator. Different tools mean different workflows and lost productivity every time you switch devices. With Visual Studio, you can use the same world-class debugging tools for all deployment targets, including Windows, the Android emulator, attached Android devices, iOS devices and emulators, and the Apache Ripple emulator.
Now that Microsoft has released Visual Studio Community edition for free, you can give this a try at no cost. You will need to download both Visual Studio, and Visual Studio Tools for Apache Cordova.
As far as I know, the only productive tool for real debugging in Cordova apps for Android platforms from 2.2 to 4.3 is jshybugger. Weinre is an inspector, not a debugger. JsHybugger instruments your code allowing you to debug inside the android WebView.
Just want to add that you can debug android apps using Genymotion. It's WAY faster then the stock android emulator.
You can use Intel XDK IDE to develop and debug on emulator or on real device
I also found Visual Studio 2015 RC tools for cordova very good, with it's ripple emulator
If you use phonegap build, there is an option to enable debug.
For local builds, you can install weinre with npm : https://npmjs.org/package/weinre
And the link to the weinre docs : http://people.apache.org/~pmuellr/weinre/docs/latest/
And there is something called chrome remote debugging but I don't know much about it, you can have a look at Raymond Camden's article : http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android
Docs for the chrome remote debugging : https://developers.google.com/chrome-developer-tools/docs/remote-debugging (if I understood correctly you need an android device with chrome as default browser) Maybe the closest to your dream solution?
On Android 4.4+ w/SDK installed:
adb logcat chromium:D SystemWebViewClient:D \*:S
If you're using Cordova 3.3 or higher and your device is running Android 4.4 or higher you can use 'Remote Debugging on Android with Chrome'. Full instructions are here:
https://developer.chrome.com/devtools/docs/remote-debugging
In summary:
- Plug the device into your desktop computer using a USB cable
- Enable USB debugging on your device (on my device this is under Settings > More > Developer options > USB debugging)
Or, if you're using Cordova 3.3+ and don't have a physical device with 4.4, you can use an emulator that uses Android 4.4+ to run the application through the emulator, on your desktop computer.
- Run your Cordova application on the device or emulator
- In Chrome on your desktop computer, enter chrome://inspect/#devices in the address bar
- Your device/emulator will be displayed along with any other recognised devices that are connected to your computer, and under your device there will be details of the Cordova 'WebView' (basically your Cordova app), which is running on the device/emulator (the way Cordova works is that it basically creates a 'browser' window on your device/emulator, within which there is a 'WebView' which is your running HTML/JavaScript app)
- Click the 'inspect' link under the 'WebView' section where you see your device/emulator listed. This brings up the Chrome developer tools that now allow you to debug your application.
- Select the 'sources' tab of the Chrome developer tools to view JavaScript that your Cordova app on the device/emulator is currently running. You can add breakpoints in the JavaScript that allow you to debug your code.
- Also, you can use the 'console' tab to view any errors (which will be shown in red), or at the bottom of the console you'll see a '>' prompt. Here you can type in any variables or objects (e.g. DOM objects) that you want to inspect the current value of, and the value will be displayed.
Here's the solution using Phonegap Build. Add the following to your config.xml to be able to inspect with Chrome Remote Webview Debugging.
First, make sure your widget tag contains xmlns:android="http://schemas.android.com/apk/res/android"
<widget
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="me.app.id"
version="1.0.0">
Then add the following
<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>
It works for me on Nexus 5, Phonegap 3.7.0.
<preference name="phonegap-version" value="3.7.0" />
Build the app in Phonegap Build, install the APK, connect the phone to the USB, enable USB debugging on you phone then visit chrome://inspect.
Source: https://www.genuitec.com/products/gapdebug/learning-center/configuration/
Use Android Device Monitor
Android Device Monitor comes packages with android sdk which you would have installed previously. In the device monitor you can see you entire device log, exceptions, messages everything. This is usefully to debug application crashes or any other such problems. To run this, go to tools/ folder inside your android sdk “/var/android-sdk-linux/tools”. Then run the following
chmod +x monitor
./monitor
If you are on windows, directly open the monitor.exe file. There is a tab below “LogCat” where you will see all device related message. You will see all messages here including android device exceptions which are not visible chrome inspect device. Be sure to create filters using the “+” sign in logcat tab, so that you see messages only for your application.
Source: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/
You can also debug with chrome your html5 apps
I create a .bat to open chrome in debug mode
cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security
You can debug Cordova Android Applications which are installed on your phone remotely from your computer via the USB cable (you can also remotely click on the web application as if you were viewing the web application from your compueter) with "Chrome Remote Debugging". You can also debug web application viewed in the Stock Android browser or Chrome on Android this way.
Enable developer mode on your Android device (go to settings -> about phone -> tap 7x on the build number).
Connect your computer with your phone via USB cable.
Lunch Chrome on your computer and navigate to chrome://inspect and click the "Inspect" button next to the remote device which you want to debug (under the "Devices" tab). OR right click inside Chrome on your computer -> Inspect -> Costumize and control DevTools (3 vertical dots - top right corner of the developer tools) -> More tools -> Remote Devices -> under Devices on the left side, click on your device to which you are connected via USB -> click on the Inspect button for the application you want.
Then click on "Console" and you can debug JavaScript the same way, as you would on a normal web application with Chrome developer tools.
I've loved weinre! How to use it:
First, put on your index.html (ensure app.settings.debugUrl is set before this):
<!-- Weinre debugging -->
<script type="text/javascript">
if (app.settings.debugUrl) {
document.addEventListener("DOMContentLoaded", function(event) {
var s = document.createElement("script")
s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
document.getElementsByTagName("body")[0].appendChild(s)
});
}
</script>
Then:
- install:
sudo npm install -g weinre - run:
weinre --boundHost -all- - 브라우저에서 엽니 다 : http : // localhost : 8080 / client / # anonymous
- 앱을 열면 감시 대상이 나타납니다.
http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/ 기반
안드로이드 <= 4.0.4 인 기기는 플러그인 https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt 를 추가해야합니다.
참고 URL : https://stackoverflow.com/questions/21332853/is-there-a-real-solution-to-debug-cordova-apps
'IT박스' 카테고리의 다른 글
| 튜플 목록에서 요소 찾기 (0) | 2020.07.09 |
|---|---|
| 숫자를 제외한 모든 것을 제거하는 PHP 코드 (0) | 2020.07.09 |
| SQL 문자열에서 앰퍼샌드 문자 이스케이프 (0) | 2020.07.09 |
| Express.js 중첩 라우터로 휴식 (0) | 2020.07.09 |
| 지정된 유형 멤버 'Date'는 LINQ to Entities에서 지원되지 않습니다. (0) | 2020.07.09 |