본문 바로가기

ChromeInspect4

[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (4) 1. 애뮬레이터/휴대폰 단말기를 연결한 상태에서 2. Chrome 브라우저에서 주소창에 Chrome://inspect 를 검색한다. 3. 그러면 이제 다음과 같이 Decices > Remote Target이 뜬다. (안 뜨면 잠깐 .. 10초 정도 기다릴 것!) 4. 여기서 하단의 inspect 를 클릭한다. 다음과 같은 DevTools 창이 새로 뜨게 된다. 이제 이 화면에서 기존 웹 브라우저에서 F12를 눌러 디버깅하는 방식으로 디버깅을 할 수도, console.log를 찍어 볼 수도 있다. 테스트 환경 설정 및 코드 1. [안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (1) [안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (1) 먼저.. 2021. 5. 2.

[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (3) 안드로이드 샘플 코드를 작성해 보겠다. activity_main.xml AndroidManifest.xml MainActivity.java package com.example.webviewdebugging; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { private WebView mWebView; String serverUrl = "http://본인IP:포트/WebViewDebugging/index.htm.. 2021. 5. 2.

[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (2) index.html 을 생성하면 기본 코드는 아래와 같이 되어 있다. 여기에 새로운 코드를 추가해 보자. 테스트 코드 테스트 버튼 를 안에 추가하고, 밖, 안에서 테스트 버튼 을 추가했다. index.html 만을 작성했을 때의 결과 화면 빨간색으로 칠한 부분은 본인의 아이피이다. 자신의 아이피를 모른다면 키보드에서 윈도우+R 키 > cmd > ipconfig 명령어로 조회할 수 있다. ... 이제 Android 웹뷰를 만들기 위한 작업을 시작해 보자. index.html 테스트 버튼 test.js var test = { callAndroid: function (callbackSuccess, callbackFail, sInput) { var result = window.BRIDGE.androidFunc(.. 2021. 5. 2.

[안드로이드] 웹뷰 디버깅 쉽게 하는 방법 - Chrome inspect 사용법 (1) 웹뷰는 모바일 단말기에서 웹페이지를 띄우기 위해 사용한다. Chrome inspect 를 사용하면 안드로이드 웹뷰에서도 웹브라우저에서 F12를 눌러 디버깅하는 것과 같은 효과를 낼 수 있다. 먼저 새로운 웹프로젝트를 생성하기 위해 다음과 같이 작업했다. 1. Package Explorer에서 우클릭 > New > Other > Dynamic Web Project 2. 프로젝트 이름을 적고 Finish 3. 기존 설치한 Tomcat Server에 방금 생성한 프로젝트를 넣기 위해 더블클릭 4. Tomcat Server을 더블클릭하면 가장 먼저 뜨는 페이지는 Overview인데, 이는 무시 Modules > Web App Module... 를 클릭 5. 방금 생성한 프로젝트를 더블클릭해 Path에 넣어준다... 2021. 5. 2.

이전 1 다음

티스토리툴바