Chrome Devtools를 활용하여 나만의 웹뷰 디버깅 환경 만들기 (조민지 Teenie)
if kakao 카카오 · YouTube
AI 핵심 요약
모바일 웹뷰는 PC 브라우저처럼 개발자 도구를 바로 열기 어려워, 프록시 설정이나 케이블 연결, 가상 기기 사용에 번거로움이 있었다. 이를 해결하기 위해 devtools-frontend와 Chrome DevTools Protocol(CDP)을 활용하고, SDK를 삽입한 실제 웹뷰와 DevTools를 웹소켓 서버로 연결하는 디버깅 환경을 만들었다. SDK는 CDP 요청을 해석해 DOM·쿠키 등의 정보를 응답하고, fetch와 XMLHttpRequest를 계측해 네트워크 요청과 로그를 DevTools UI에 전달한다. 그 결과 케이블 없이 PC에서 실제 카카오톡 웹뷰를 디버깅할 수 있었으며, 도구를 만들며 CDP와 DevTools의 동작 원리를 익히고 사용자 피드백을 바탕으로 기능을 개선하는 경험을 얻었다.
- Chrome DevTools의 UI를 재사용하려면 devtools-frontend를 빌드하고, DevTools가 기대하는 CDP 메시지를 주고받도록 연결해야 한다.
- CDP는 JSON RPC 형식으로 요청 ID, 메서드, 파라미터를 전달하고 응답을 요청 ID에 대응시킨다.
- SDK가 웹뷰의 fetch와 XMLHttpRequest를 계측하면 네트워크 요청을 DevTools의 Network 탭에 표시할 수 있다.
- 실제 앱에서만 재현되는 인증·OS·웹뷰 버전별 문제는 가상 환경보다 실제 클라이언트에서 디버깅하는 편이 유용하다.
소개
[2024.04.11. 제5회 Kakao Tech Meet 발표] 웹뷰 서비스를 개발하는 과정에서 겪었던 불편함과, 이를 해결하기 위해 새로운 웹뷰 디버깅 환경을 구축해 나간 이야기를 소개합니다. ChromeDevTools의 오픈소스인 devtools-frontend와 devtools-protocol을 활용하여 익숙하면서도 더욱 편리하게 웹뷰 디버깅을 수행할 수 있는 환경을 만든 과정을 공유드립니다. 웹뷰와 같이 디버깅을 하기 복잡한 환경에서 서비스를 개발하는 프론트엔드 개발자들에게 추천합니다. #kakaotechmeet #webview #debugging #ChromeDevTools #websocket 발표자: 조민지(teenie.jo) 톡유저서비스FE의 티니입니다! 잔여백신, 전자증명서, 전자문서 등 카카오톡 지갑의 다양한 웹뷰 서비스를 개발하고 있습니다 :) 💬 발표자 인터뷰와 비하인드 보러가기: https://tech.kakao.com/2024/04/29/techmee...
비슷한 학습 자료
컨퍼런스 if kakao
코드로 해두면 편해요! 실수를 줄이는 개발 환경과 절차
컨퍼런스 if kakao
if(kakao)25 다양한 개발 환경과 절차에 대해 일일이 설명하거나 복잡한 문서를 작성하는 대신, 코드의 형태로 선언하고 관리할 수 있습니다. 이로써 업무를 효율화하고 보다 안정감 있게 신규 서비스를 만든 경험을 나누고자 합니다. #TECH #PRODUCT #General 카카오에서 숏폼 스튜디오를 만들고 있는 김우섭(wes.kim)입니다. 요즘은 Nix와 같은 선언형 관리에 관심이 많습니다. 발표자료 보기 📍 https://if.kakao.com/2025/session?sessionId=13 📍 if.kakao.com if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
데브옵스 · 인프라
컨퍼런스 if kakao
웹뷰 개발 시 고려사항 #크로스_플랫폼_호환성
컨퍼런스 if kakao
웹 텍스트 에디터 개발에 필요한 고민과 신규 에디터 소개 (박민규 Eliot)
컨퍼런스 if kakao
[2024.04.11. 제5회 Kakao Tech Meet 발표] 웹 텍스트 에디터 개발의 근본적인 문제를 정의하고 제시합니다. 카카오에서 신규 에디터를 개발하게 된 배경과 사용 목적을 소개합니다. 에디터 개발 시 마주한 다양한 챌린지를 어떻게 해결하였는지 공유합니다. 마지막으로 웹 텍스트 에디터 개발 관련 논의되고 있는 미래의 웹 API 스펙을 간략히 소개합니다. 툴체인을 넘어 근본적인 문제 해결에 관심 있는 프론트엔드 개발자들에게 추천합니다. #kakaotechmeet #TextEditor #IME #FrontendArchitecture 발표자: 박민규(eliot.p) 로컬FE에서 확장형 웹 텍스트 에디터 개발을 하고 있습니다. 기술 이전에 기술 윤리와 같은 철학적 사유에도 관심이 많습니다. 🔥발표자 GitHub: https://github.com/vlwkaos 🔥발표자 블로그: https://vlwkaos.netlify.app/ 💬 발표자 인터뷰와 비하인드 보...
웹 개발 프론트엔드
컨퍼런스 if kakao
ChatGPT로 달라진 개발자의 일상 (황민호, Robin)
컨퍼런스 if kakao
[2023.05.11. 제1회 kakao tech meet 발표] 카카오에서 검색, 광고, 오픈소스와 관련된 여러 서비스들을 개발했습니다. 현재는 사내 개발자들의 기술 공유를 위한 사내 플랫폼을 개발 중입니다. ChatGPT 서비스 오픈 이후, 카카오 개발자의 일상 변화에 대해 함께 이야기를 나눠보고자 합니다. 이제는 일상이 되어 버린 AI 활용에 초점을 맞춰 개발 업무뿐만 아니라 여러 업무들에서 어떻게 활용하고 있는지 사례들을 공유합니다. AI 도구들을 활용하여 업무를 개선하고 싶은 분들이 듣길 추천합니다. #kakaotech #chatgpt #developer #opensource #copilot --- 💬 발표자 인터뷰: https://tech.kakao.com/2023/05/31/life-after-chatgpt/ ✨ 카카오 테크 페이스북: https://www.facebook.com/kakaotech
AI 코딩
컨퍼런스 if kakao
카카오페이 iOS 웹뷰 소개 및 리팩토링 이야기 / if(kakao)2022
컨퍼런스 if kakao
카카오페이는 네이티브와 웹뷰를 적절히 사용하여 높은 수준의 사용자 경험을 주고자 노력하고 있습니다. 네이티브와 웹뷰의 데이터 전달부터 풀스크린 웹뷰, 바텀시트형 웹뷰, 네비게이션 영역 핸들링이 가능한 웹뷰 등 다양한 방식의 웹뷰를 사용하고 있습니다. 본 세션에서는 다양한 시도를 통해 현재 사용중인 웹뷰로 발전하게 된 과정을 소개합니다. 여러 타입의 웹뷰를 핸들링하는 방법과 리팩토링 스토리를 포함하여 페이 서비스의 특성상 카카오페이앱 및 카카오톡앱 2개의 앱을 개발 해야하는 환경에서 어떻게 코드를 관리하는지에 대해 알아봅니다. #iOS #WebView #리팩토링 #WKWebView 카카오페이 사용자에게 더 나은 경험을 주고싶은 iOS 개발자 joey입니다. 카카오톡 내의 카카오페이 서비스와 카카오페이 앱을 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-89 if(kakao)2022에 대한 자세한 정보는 👉 h...
웹 개발 모바일 앱 개발
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업