WebViews are widely used in native apps to render web content Chrome (PC) Chrome (Android) Safari (iOS) Safari (PC) WebView WebView WebView WebView Making WebViews Work for the Web Dominique Hazael-Massieux, TPAC2021 https://www.w3.org/2021/Talks/dhm-tpac-webviews/#5
Chrome DevTools blink V8 console API is called! index.js index.js Communication with DevTools JS engines notify API calls to DevTools (Event) OK, I’ll display them! Event
Chrome DevTools blink V8 console API is called! fetch API is called! index.js index.js Communication with DevTools JS engines notify API calls to DevTools (Event) DOM tree is changed! OK, I’ll display them!
Chrome DevTools blink index.js V8 DOM tree Give me the DOM tree! index.js Communication with DevTools JS engines send the response to the command Thank you!
WebView Your website is broken when I view it in Twitter’s in-app browser! < > Oops, let me check. > Wait, how can I debug in-app browser? I can’t inspect it with DevTools...
In-app browser, LIFF, Mini app, Super app How do you debug WebView-based applications? WebView Your website is broken when I view it in Twitter’s in-app browser! < > Oops, let me check. > Wait, how can I debug in-app browser? I can’t inspect it with DevTools...
In-app browser, LIFF, Mini app, Super app How do you debug WebView-based applications? WebView Your website is broken when I view it in Twitter’s in-app browser! < > Oops, let me check. > Wait, how can I debug in-app browser? I can’t inspect it with DevTools... Simulator? Remote debug?
Simulator WKWebView WebView If you can run an app using WebView on your simulator, you can debug without any problem. Good! But you can’t run Facebook, LINE, Twitter on your simulator. (unless you are working there) Simulator
https://jsconf.jp/2021 develop hosting register ● LINE Login ● send messages ● get friends list ● ... https://liff.line.me/{liff_id} Your web app can use a variety of LINE-specific APIs Introduction to LIFF/LINE Mini App - Characteristics and Practical Development https://linedevday.linecorp.com/2021/en/sessions/151/ Example: LIFF
https://jsconf.jp/2021 develop hosting register ● LINE Login ● send messages ● get friends list ● ... https://liff.line.me/{liff_id} Your web app can use a variety of LINE-specific APIs You can’t debug your web app running on LIFF Browser 😢 Android: setWebContentsDebuggingEnabled(false) iOS: Production build (downloaded from App Store) Example: LIFF For Improvement of Developer Experience of All LIFF App Developers https://linedevday.linecorp.com/2021/en/sessions/142/
- Production build - setWebContentsDebuggingEnabled(false) DevTools can’t get information from JS engine. console, network logs, DOM tree, memory,... How debug a web app on WebView with debug options disabled? WebView
How debug a web app on WebView with debug options disabled? - Production build - setWebContentsDebuggingEnabled(false) Well, then, Let’s send debug information using only JavaScript API! DevTools can’t get information from JS engine. console, network logs, DOM tree, memory,... WebView
Reproduce client-server model with JavaScript DevTools client DevTools Protocol Server Client WebView Send events when an API is called (console, network request/response)
Reproduce client-server model with JavaScript DevTools client DevTools Protocol Send events when an API is called (console, network request/response) DevTools Protocol Interpret commands (DOM manipulation) Server Client WebView
Chrome DevTools blink V8 index.js index.js Intercept API calls with JavaScript fetch API is called! console API is called! DOM tree is changed! OK, let’s use JavaScript! index.js doesn’t have access to JS engine’s information
Headless Inspector index.js headless-inspector-core Console fetch XHR DOM Storage sendBeacon Each API is wrapped by a Proxy object and emits events Network Elements Console Application
Headless Inspector index.js headless-inspector-core Console fetch XHR DOM Storage sendBeacon Each API is wrapped by a Proxy object and emits events Network Elements Console Application
Summary 80% of native apps use WebViews 10+% of Web content is rendered on WebViews WebView But you cannot debug WebView 😢 All web applications can be debugged using any DevTools (Chrome DevTools, Safari Web Inspector, etc.) without any side effects 😄 Universal DevTools https://github.com/cola119/universal-devtools-poc
Limitation, Challenges - Call Stack - Breakpoints - Variables - Analyze runtime performance There are some limitations because Universal DevTools is implemented in JavaScript. But at the same time, there are many challenges - Edit source files - Memory Usage - Record - Extension etc...
mhrtech
kevinrobot34
doradora09
.png){kind=avatar}
jisungbin
trycycle
nenonaninu
newrelic2023
watany
taka2noda
takagimeow
shpigford
gr2m
jnunemaker
andyhume
lauravandoore
danielanewman
garrettdimon
jasonvnalue
lemiorhan
palkan
ddemaree