diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md index 1531e98c54057208cfa7393d975401264bc3f2fa..956f922e5414eb058e15ac7f52daba1c8d8db8cf 100644 --- a/en/application-dev/reference/apis/js-apis-webview.md +++ b/en/application-dev/reference/apis/js-apis-webview.md @@ -739,6 +739,11 @@ Loads specified data. | baseUrl | string | No | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** component to **window.origin**.| | historyUrl | string | No | URL used for historical records. If this parameter is not empty, historical records are managed based on this URL. This parameter is invalid when **baseUrl** is left empty.| +> **NOTE** +> +> To load a local image, you can assign a space to either **baseUrl** or **historyUrl**. For details, see the sample code. +> In the scenario of loading a local image, **baseUrl** and **historyUrl** cannot be both empty. Otherwise, the image cannot be loaded. + **Error codes** For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md). @@ -1754,7 +1759,7 @@ Zooms in or out of this web page. | Name| Type| Mandatory| Description| | ------ | -------- | ---- | ------------------------------------------------------------ | -| factor | number | Yes | Relative zoom ratio. A positive value indicates zoom-in, and a negative value indicates zoom-out.| +| factor | number | Yes | Relative zoom ratio. The value must be greater than 0. The value **1** indicates that the page is not zoomed. A value smaller than **1** indicates zoom-out, and a value greater than **1** indicates zoom-in.| **Error codes** @@ -2037,7 +2042,7 @@ Creates web message ports. For the complete sample code, see [onMessageEventExt] | Name| Type | Mandatory| Description | | ------ | ---------------------- | ---- | :------------------------------| -| isExtentionType10+ | boolean | No | Whether to use the extended interface. The default value is **false**, indicating that the extended interface is not used.| +| isExtentionType10+ | boolean | No | Whether to use the extended interface. The default value is **false**, indicating that the extended interface is not used. This parameter is supported since API version 10.| **Return value** @@ -2137,24 +2142,24 @@ struct WebComponent { this.ports = this.controller.createWebMessagePorts(); // 2. Register a callback on a message port (for example, port 1) on the application side. this.ports[1].onMessageEvent((result: web_webview.WebMessage) => { - let msg = 'Got msg from HTML:'; - if (typeof(result) == "string") { - console.log("received string message from html5, string is:" + result); - msg = msg + result; - } else if (typeof(result) == "object") { - if (result instanceof ArrayBuffer) { - console.log("received arraybuffer from html5, length is:" + result.byteLength); - msg = msg + "lenght is " + result.byteLength; - } else { - console.log("not support"); - } + let msg = 'Got msg from HTML:'; + if (typeof(result) == "string") { + console.log("received string message from html5, string is:" + result); + msg = msg + result; + } else if (typeof(result) == "object") { + if (result instanceof ArrayBuffer) { + console.log("received arraybuffer from html5, length is:" + result.byteLength); + msg = msg + "lenght is " + result.byteLength; } else { console.log("not support"); } - this.receivedFromHtml = msg; - }) - // 3. Send another message port (for example, port 0) to the HTML side, which can then save the port for future use. - this.controller.postMessage('__init_port__', [this.ports[0]], '*'); + } else { + console.log("not support"); + } + this.receivedFromHtml = msg; + }) + // 3. Send another message port (for example, port 0) to the HTML side, which can then save the port for future use. + this.controller.postMessage('__init_port__', [this.ports[0]], '*'); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -2523,6 +2528,37 @@ struct WebComponent { } ``` +You can customize the user agent based on the default user agent. +```ts +// xxx.ets +import web_webview from '@ohos.web.webview'; + +@Entry +@Component +struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController(); + @State ua: string = "" + + aboutToAppear():void { + web_webview.once('webInited', () => { + try { + // Customize the user agent on the application side. + this.ua = this.controller.getUserAgent() + 'xxx'; + } catch(error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + } + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .userAgent(this.ua) + } + } +} +``` + ### getTitle getTitle(): string @@ -3191,7 +3227,7 @@ import image from "@ohos.multimedia.image" @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); - @State pixelmap: image.PixelMap = undefined; + @State pixelmap: image.PixelMap = undefined; build() { Column() { @@ -3297,12 +3333,12 @@ struct WebComponent { .onClick(() => { try { this.controller.hasImage((error, data) => { - if (error) { - console.info(`hasImage error: ` + JSON.stringify(error)) - return; - } - console.info("hasImage: " + data); - }); + if (error) { + console.info(`hasImage error: ` + JSON.stringify(error)) + return; + } + console.info("hasImage: " + data); + }); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -3352,11 +3388,11 @@ struct WebComponent { .onClick(() => { try { this.controller.hasImage().then((data) => { - console.info('hasImage: ' + data); - }) - .catch(function (error) { - console.error("error: " + error); - }) + console.info('hasImage: ' + data); + }) + .catch(function (error) { + console.error("error: " + error); + }) } catch (error) { console.error(`Errorcode: ${error.code}, Message: ${error.message}`); } @@ -4131,7 +4167,7 @@ struct WebComponent { Implements a **WebCookieManager** instance to manage behavior of cookies in **\** components. All **\** components in an application share a **WebCookieManager** instance. -### getCookie +### getCookie static getCookie(url: string): string @@ -4187,7 +4223,7 @@ struct WebComponent { } ``` -### setCookie +### setCookie static setCookie(url: string, value: string): void @@ -4238,7 +4274,7 @@ struct WebComponent { } ``` -### saveCookieAsync +### saveCookieAsync static saveCookieAsync(callback: AsyncCallback\): void @@ -4250,7 +4286,7 @@ Saves the cookies in the memory to the drive. This API uses an asynchronous call | Name | Type | Mandatory| Description | | -------- | ---------------------- | ---- | :------------------------------------------------- | -| callback | AsyncCallback\ | Yes | Callback used to return the operation result.| +| callback | AsyncCallback\ | Yes | Callback used to return whether the cookies are successfully saved.| **Example** @@ -4284,7 +4320,7 @@ struct WebComponent { } ``` -### saveCookieAsync +### saveCookieAsync static saveCookieAsync(): Promise\ @@ -4331,7 +4367,7 @@ struct WebComponent { } ``` -### putAcceptCookieEnabled +### putAcceptCookieEnabled static putAcceptCookieEnabled(accept: boolean): void @@ -4372,7 +4408,7 @@ struct WebComponent { } ``` -### isCookieAllowed +### isCookieAllowed static isCookieAllowed(): boolean @@ -4410,7 +4446,7 @@ struct WebComponent { } ``` -### putAcceptThirdPartyCookieEnabled +### putAcceptThirdPartyCookieEnabled static putAcceptThirdPartyCookieEnabled(accept: boolean): void @@ -4451,7 +4487,7 @@ struct WebComponent { } ``` -### isThirdPartyCookieAllowed +### isThirdPartyCookieAllowed static isThirdPartyCookieAllowed(): boolean @@ -4489,7 +4525,7 @@ struct WebComponent { } ``` -### existCookie +### existCookie static existCookie(): boolean @@ -4527,7 +4563,7 @@ struct WebComponent { } ``` -### deleteEntireCookie +### deleteEntireCookie static deleteEntireCookie(): void @@ -4558,7 +4594,7 @@ struct WebComponent { } ``` -### deleteSessionCookie +### deleteSessionCookie static deleteSessionCookie(): void diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md index f02aa129d41aa5209fed569dba85636cfea1c666..5e2e776bf3784794349d7b2a61db2171f7a00313 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -29,7 +29,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) | Name | Type | Mandatory | Description | | ---------- | ---------------------------------------- | ---- | ------- | | src | [ResourceStr](ts-types.md) | Yes | Address of a web page resource. To access local resource files, use the **$rawfile** or **resource** protocol. To load a local resource file in the sandbox outside of the application package, use **file://** to specify the path of the sandbox.| -| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.| +| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | Controller. This API is deprecated since API version 9. You are advised to use **WebviewController** instead.| **Example** @@ -243,7 +243,7 @@ Registers a JavaScript object with the window. APIs of this object can then be i | object | object | Yes | - | Object to be registered. Methods can be declared, but attributes cannot. | | name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window.| | methodList | Array\ | Yes | - | Methods of the JavaScript object to be registered at the application side. | -| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | - | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.| +| controller | [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | - | Controller. This API is deprecated since API version 9. You are advised to use **WebviewController** instead.| **Example** @@ -410,7 +410,7 @@ Sets whether to enable zoom gestures. By default, this feature is enabled. overviewModeAccess(overviewModeAccess: boolean) -Sets whether to load web pages by using the overview mode. By default, this feature is enabled. +Sets whether to load web pages by using the overview mode. By default, this feature is enabled. Currently, only mobile devices are supported. **Parameters** @@ -536,7 +536,6 @@ Sets whether video playback must be started by user gestures. This API is not ap multiWindowAccess(multiWindow: boolean) Sets whether to enable the multi-window permission. - Enabling the multi-window permission requires implementation of the **onWindowNew** event. For the sample code, see [onWindowNew](#onwindownew9). **Parameters** @@ -721,8 +720,6 @@ This API is deprecated since API version 9. You are advised to use [textZoomRati ```ts // xxx.ets - import web_webview from '@ohos.web.webview' - @Entry @Component struct WebComponent { @@ -1179,7 +1176,7 @@ Sets the cursive font family for the web page. darkMode(mode: WebDarkMode) -Sets the web dark mode. By default, web dark mode is disabled. When it is enabled, the **\** component enables the dark theme defined for web pages if the theme has been defined in **prefer-color-scheme** of a media query, and remains unchanged otherwise. To enable the forcible dark mode, use this API with [forceDarkAccess](#forcedarkaccess9). +Sets the web dark mode. By default, web dark mode is disabled. When it is enabled, the **\** component enables the dark theme defined for web pages if the theme has been defined in **prefers-color-scheme** of a media query, and remains unchanged otherwise. To enable the forcible dark mode, use this API with [forceDarkAccess](#forcedarkaccess9). **Parameters** @@ -1423,8 +1420,10 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag controller: web_webview.WebviewController = new web_webview.WebviewController() build() { Column() { - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile("xxx.html"), controller: this.controller }) .onAlert((event) => { + console.log("event.url:" + event.url) + console.log("event.message:" + event.message) AlertDialog.show({ title: 'onAlert', message: 'text', @@ -1451,6 +1450,25 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag } ``` + ``` + + + + + + + +

WebView onAlert Demo

+ + + + + ``` + ### onBeforeUnload onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) @@ -1484,7 +1502,7 @@ Called when this page is about to exit after the user refreshes or closes the pa build() { Column() { - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile("xxx.html"), controller: this.controller }) .onBeforeUnload((event) => { console.log("event.url:" + event.url) console.log("event.message:" + event.message) @@ -1514,6 +1532,25 @@ Called when this page is about to exit after the user refreshes or closes the pa } ``` + ``` + + + + + + + +

WebView onBeforeUnload Demo

+ Click here + + + + ``` + ### onConfirm onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean) @@ -1547,11 +1584,10 @@ Called when **confirm()** is invoked by the web page. build() { Column() { - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile("xxx.html"), controller: this.controller }) .onConfirm((event) => { console.log("event.url:" + event.url) console.log("event.message:" + event.message) - console.log("event.result:" + event.result) AlertDialog.show({ title: 'onConfirm', message: 'text', @@ -1578,6 +1614,34 @@ Called when **confirm()** is invoked by the web page. } ``` + ``` + + + + + + + + +

WebView onConfirm Demo

+ +

+ + + + ``` + ### onPrompt9+ onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean) @@ -1609,7 +1673,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul build() { Column() { - Web({ src: 'www.example.com', controller: this.controller }) + Web({ src: $rawfile("xxx.html"), controller: this.controller }) .onPrompt((event) => { console.log("url:" + event.url) console.log("message:" + event.message) @@ -1626,7 +1690,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul secondaryButton: { value: 'ok', action: () => { - event.result.handleConfirm() + event.result.handlePromptConfirm(event.value) } }, cancel: () => { @@ -1640,6 +1704,30 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul } ``` + ``` + + + + + + + + +

WebView onPrompt Demo

+ +

+ + + + ``` + ### onConsole onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) @@ -1693,6 +1781,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp | Name | Type | Description | | ------------------ | ------------- | ----------------------------------- | | url | string | URL for the download task. | +| userAgent | string | User agent used for download. | | contentDisposition | string | Content-Disposition response header returned by the server, which may be empty.| | mimetype | string | MIME type of the content returned by the server. | | contentLength | contentLength | Length of the content returned by the server. | @@ -2380,7 +2469,6 @@ Called when an SSL error occurs during resource loading. event.handler.handleCancel() } }) - return true }) } } @@ -2435,7 +2523,6 @@ Called when an SSL client certificate request is received. event.handler.ignore() } }) - return true }) } } @@ -3581,7 +3668,7 @@ Obtains the MIME type of the resource response. ### setResponseData9+ -setResponseData(data: string | number) +setResponseData(data: string | number \| Resource) Sets the data in the resource response. @@ -3589,7 +3676,7 @@ Sets the data in the resource response. | Name| Type | Mandatory| Default Value| Description | | ------ | ---------------- | ---- | ------ | ------------------------------------------------------------ | -| data | string \| number | Yes | - | Resource response data to set. When set to a number, the value indicates a file handle.| +| data | string \| number \| [Resource](ts-types.md)10+| Yes | - | Resource response data to set. When set to a string, the value indicates a string in HTML format. When set to a number, the value indicates a file handle, which is closed by the system **\** component. When set to a **Resource** object, the value indicates the file resources in the **rawfile** directory of the application.| ### setResponseEncoding9+ @@ -4241,7 +4328,7 @@ Resends the web form data. } ``` -### cancel9+ +### cancel9+ cancel(): void @@ -4272,7 +4359,7 @@ Cancels the resending of web form data. Implements a **WebController** to control the behavior of the **\** component. A **WebController** can control only one **\** component, and the APIs in the **WebController** can be invoked only after it has been bound to the target **\** component. -This API is deprecated since API version 9. You are advised to use [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller). +This API is deprecated since API version 9. You are advised to use [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller) instead. ### Creating an Object @@ -4319,7 +4406,7 @@ requestFocus() Requests focus for this web page. -This API is deprecated since API version 9. You are advised to use [requestFocus9+](../apis/js-apis-webview.md#requestfocus). +This API is deprecated since API version 9. You are advised to use [requestFocus9+](../apis/js-apis-webview.md#requestfocus) instead. **Example** @@ -4348,7 +4435,7 @@ accessBackward(): boolean Checks whether going to the previous page can be performed on the current page. -This API is deprecated since API version 9. You are advised to use [accessBackward9+](../apis/js-apis-webview.md#accessbackward). +This API is deprecated since API version 9. You are advised to use [accessBackward9+](../apis/js-apis-webview.md#accessbackward) instead. **Return value** @@ -4384,7 +4471,7 @@ accessForward(): boolean Checks whether going to the next page can be performed on the current page. -This API is deprecated since API version 9. You are advised to use [accessForward9+](../apis/js-apis-webview.md#accessforward). +This API is deprecated since API version 9. You are advised to use [accessForward9+](../apis/js-apis-webview.md#accessforward) instead. **Return value** @@ -4420,7 +4507,7 @@ accessStep(step: number): boolean Performs a specific number of steps forward or backward from the current page. -This API is deprecated since API version 9. You are advised to use [accessStep9+](../apis/js-apis-webview.md#accessstep). +This API is deprecated since API version 9. You are advised to use [accessStep9+](../apis/js-apis-webview.md#accessstep) instead. **Parameters** @@ -4463,7 +4550,7 @@ backward(): void Goes to the previous page based on the history stack. This API is generally used together with **accessBackward**. -This API is deprecated since API version 9. You are advised to use [backward9+](../apis/js-apis-webview.md#backward). +This API is deprecated since API version 9. You are advised to use [backward9+](../apis/js-apis-webview.md#backward) instead. **Example** @@ -4492,7 +4579,7 @@ forward(): void Goes to the next page based on the history stack. This API is generally used together with **accessForward**. -This API is deprecated since API version 9. You are advised to use [forward9+](../apis/js-apis-webview.md#forward). +This API is deprecated since API version 9. You are advised to use [forward9+](../apis/js-apis-webview.md#forward) instead. **Example** @@ -4521,7 +4608,7 @@ deleteJavaScriptRegister(name: string) Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the[refresh](#refreshdeprecated) API. -This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister). +This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister) instead. **Parameters** @@ -4557,7 +4644,7 @@ getHitTest(): HitTestType Obtains the element type of the area being clicked. -This API is deprecated since API version 9. You are advised to use [getHitTest9+](../apis/js-apis-webview.md#gethittest). +This API is deprecated since API version 9. You are advised to use [getHitTest9+](../apis/js-apis-webview.md#gethittest) instead. **Return value** @@ -4597,7 +4684,7 @@ If **baseUrl** is set to a data URL, the encoded string will be loaded by the ** If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be processed by the **\** component as a non-encoded string in a manner similar to **loadUrl**. -This API is deprecated since API version 9. You are advised to use [loadData9+](../apis/js-apis-webview.md#loaddata). +This API is deprecated since API version 9. You are advised to use [loadData9+](../apis/js-apis-webview.md#loaddata) instead. **Parameters** @@ -4644,7 +4731,7 @@ The object injected through **loadUrl** is valid only in the current document. I The object injected through **registerJavaScriptProxy** is still valid on a new page redirected through **loadUrl**. -This API is deprecated since API version 9. You are advised to use [loadUrl9+](../apis/js-apis-webview.md#loadurl). +This API is deprecated since API version 9. You are advised to use [loadUrl9+](../apis/js-apis-webview.md#loadurl) instead. **Parameters** @@ -4680,7 +4767,7 @@ onActive(): void Called when the **\** component enters the active state. -This API is deprecated since API version 9. You are advised to use [onActive9+](../apis/js-apis-webview.md#onactive). +This API is deprecated since API version 9. You are advised to use [onActive9+](../apis/js-apis-webview.md#onactive) instead. **Example** @@ -4709,7 +4796,7 @@ onInactive(): void Called when the **\** component enters the inactive state. -This API is deprecated since API version 9. You are advised to use [onInactive9+](../apis/js-apis-webview.md#oninactive). +This API is deprecated since API version 9. You are advised to use [onInactive9+](../apis/js-apis-webview.md#oninactive) instead. **Example** @@ -4737,7 +4824,7 @@ zoom(factor: number): void Sets a zoom factor for the current web page. -This API is deprecated since API version 9. You are advised to use [zoom9+](../apis/js-apis-webview.md#zoom). +This API is deprecated since API version 9. You are advised to use [zoom9+](../apis/js-apis-webview.md#zoom) instead. **Parameters** @@ -4773,7 +4860,7 @@ refresh() Called when the **\** component refreshes the web page. -This API is deprecated since API version 9. You are advised to use [refresh9+](../apis/js-apis-webview.md#refresh). +This API is deprecated since API version 9. You are advised to use [refresh9+](../apis/js-apis-webview.md#refresh) instead. **Example** @@ -4802,7 +4889,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. You must invoke the [refresh](#refreshdeprecated) API for the registration to take effect. -This API is deprecated since API version 9. You are advised to use [registerJavaScriptProxy9+](../apis/js-apis-webview.md#registerjavascriptproxy). +This API is deprecated since API version 9. You are advised to use [registerJavaScriptProxy9+](../apis/js-apis-webview.md#registerjavascriptproxy) instead. **Parameters** @@ -4870,7 +4957,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) Executes a JavaScript script. This API uses an asynchronous callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be invoked in **onPageEnd**. -This API is deprecated since API version 9. You are advised to use [runJavaScript9+](../apis/js-apis-webview.md#runjavascript). +This API is deprecated since API version 9. You are advised to use [runJavaScript9+](../apis/js-apis-webview.md#runjavascript) instead. **Parameters** @@ -4931,7 +5018,7 @@ stop() Stops page loading. -This API is deprecated since API version 9. You are advised to use [stop9+](../apis/js-apis-webview.md#stop). +This API is deprecated since API version 9. You are advised to use [stop9+](../apis/js-apis-webview.md#stop) instead. **Example** @@ -4960,7 +5047,7 @@ clearHistory(): void Clears the browsing history. -This API is deprecated since API version 9. You are advised to use [clearHistory9+](../apis/js-apis-webview.md#clearhistory). +This API is deprecated since API version 9. You are advised to use [clearHistory9+](../apis/js-apis-webview.md#clearhistory) instead. **Example** diff --git a/en/application-dev/web/web-component-overview.md b/en/application-dev/web/web-component-overview.md index 187661ee6c6f9f98411d89c67052615e04d14bca..44335aace12115c5e42f42b9e2ca1af25889f1d2 100644 --- a/en/application-dev/web/web-component-overview.md +++ b/en/application-dev/web/web-component-overview.md @@ -8,7 +8,7 @@ In addition to displaying web page content on applications, the **Web** componen - **Page interaction**: supports a wide range of page interaction modes, which allow you to set the dark mode for frontend pages, load pages in a new window, manage location permissions and cookies, and use frontend page JavaScript code on the application. -- **Page debugging**: uses DevTools to debug frontend pages. +- **Page debugging**: uses [DevTools](web-debugging-with-devtools.md) to debug frontend pages. To help you better understand the features of the **Web** component, the following sections will exemplify use of the **Web** component in common application scenarios.