From 7901b57fece1651d3bf93a49793e3c63b323ed96 Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Tue, 27 Jun 2023 20:13:09 +0800
Subject: [PATCH] Update docs (19151) Signed-off-by: ester.zhou
 <ester.zhou@huawei.com>

---
 .../reference/apis/js-apis-webview.md         | 328 +++++++++++-------
 .../arkui-ts/ts-basic-components-web.md       | 182 +++++-----
 .../web/web-debugging-with-devtools.md        |  13 +-
 3 files changed, 295 insertions(+), 228 deletions(-)

diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md
index 956f922e54..ddd64de290 100644
--- a/en/application-dev/reference/apis/js-apis-webview.md
+++ b/en/application-dev/reference/apis/js-apis-webview.md
@@ -63,42 +63,6 @@ struct WebComponent {
 
 Implements a **WebMessagePort** object to send and receive messages.
 
-### close
-
-close(): void
-
-Closes this message port.
-
-**System capability**: SystemCapability.Web.Webview.Core
-
-**Example**
-
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview'
-
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
-  msgPort: web_webview.WebMessagePort[] = null;
-
-  build() {
-    Column() {
-      Button('close')
-        .onClick(() => {
-          if (this.msgPort && this.msgPort[1]) {
-            this.msgPort[1].close();
-          } else {
-            console.error("msgPort is null, Please initialize first");
-          }
-        })
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
-
 ### postMessageEvent
 
 postMessageEvent(message: WebMessage): void
@@ -448,6 +412,56 @@ function postStringToApp() {
 }
 ```
 
+### close
+
+close(): void
+
+Closes this message port. To use this API, a message port must first be created using [createWebMessagePorts](#createwebmessageports).
+
+**System capability**: SystemCapability.Web.Webview.Core
+
+**Example**
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview'
+
+@Entry
+@Component
+struct WebComponent {
+  controller: web_webview.WebviewController = new web_webview.WebviewController();
+  msgPort: web_webview.WebMessagePort[] = null;
+
+  build() {
+    Column() {
+      // Use createWebMessagePorts to create a message port.
+      Button('createWebMessagePorts')
+        .onClick(() => {
+          try {
+            this.msgPort = this.controller.createWebMessagePorts();
+            console.log("createWebMessagePorts size:" + this.msgPort.length)
+          } catch (error) {
+            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+          }
+        })
+      Button('close')
+        .onClick(() => {
+          try {
+            if (this.msgPort && this.msgPort.length == 2) {
+              this.msgPort[1].close();
+            } else {
+              console.error("msgPort is null, Please initialize first");
+            }
+          } catch (error) {
+            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+          }
+        })
+      Web({ src: 'www.example.com', controller: this.controller })
+    }
+  }
+}
+```
+
 ## WebviewController
 
 Implements a **WebviewController** to control the behavior of the **\<Web>** component. A **WebviewController** can control only one **\<Web>** component, and the APIs (except static APIs) in the **WebviewController** can be invoked only after it has been bound to the target **\<Web>** component.
@@ -473,7 +487,6 @@ export default class EntryAbility extends UIAbility {
     onCreate(want, launchParam) {
         console.log("EntryAbility onCreate")
         web_webview.WebviewController.initializeWebEngine()
-        globalThis.abilityWant = want
         console.log("EntryAbility onCreate done")
     }
 }
@@ -516,30 +529,11 @@ export default class EntryAbility extends UIAbility {
 }
 ```
 
-### Creating an Object
-
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview';
-
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
-
-  build() {
-    Column() {
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
-
 ### setWebDebuggingAccess
 
 static setWebDebuggingAccess(webDebuggingAccess: boolean): void
 
-Sets whether to enable web debugging.
+Sets whether to enable web debugging. For details, see [Debugging Frontend Pages by Using DevTools](../../web/web-debugging-with-devtools.md).
 
 **System capability**: SystemCapability.Web.Webview.Core
 
@@ -656,70 +650,73 @@ struct WebComponent {
 ```
 
 There are three methods for loading local resource files:
-1. Using $rawfile
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview'
 
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
+1. Using $rawfile
+   ```ts
+   // xxx.ets
+   import web_webview from '@ohos.web.webview'
+
+   @Entry
+   @Component
+   struct WebComponent {
+     controller: web_webview.WebviewController = new web_webview.WebviewController();
+
+     build() {
+       Column() {
+         Button('loadUrl')
+           .onClick(() => {
+             try {
+               // Load a local resource file through $rawfile.
+               this.controller.loadUrl($rawfile('index.html'));
+             } catch (error) {
+               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+             }
+           })
+         Web({ src: 'www.example.com', controller: this.controller })
+       }
+     }
+   }
+   ```
 
-  build() {
-    Column() {
-      Button('loadUrl')
-        .onClick(() => {
-          try {
-            // Load a local resource file through $rawfile.
-            this.controller.loadUrl($rawfile('xxx.html'));
-          } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
-          }
-        })
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
 2. Using the resources protocol
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview'
-
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
-
-  build() {
-    Column() {
-      Button('loadUrl')
-        .onClick(() => {
-          try {
-            // Load a local resource file through the resource protocol.
-            this.controller.loadUrl("resource://rawfile/xxx.html");
-          } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
-          }
-        })
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
+   ```ts
+   // xxx.ets
+   import web_webview from '@ohos.web.webview'
+
+   @Entry
+   @Component
+   struct WebComponent {
+     controller: web_webview.WebviewController = new web_webview.WebviewController();
+
+     build() {
+       Column() {
+         Button('loadUrl')
+           .onClick(() => {
+             try {
+               // Load a local resource file through the resource protocol.
+               this.controller.loadUrl("resource://rawfile/index.html");
+             } catch (error) {
+               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+             }
+           })
+         Web({ src: 'www.example.com', controller: this.controller })
+       }
+     }
+   }
+   ```
 
 3. Using a sandbox path. For details, see the example of loading local resource files in the sandbox in [Web](../arkui-ts/ts-basic-components-web.md#web).
 
-```html
-<!-- xxx.html -->
-<!DOCTYPE html>
-<html>
-  <body>
-    <p>Hello World</p>
-  </body>
-</html>
-```
+   HTML file to be loaded:
+   ```html
+   <!-- index.html -->
+   <!DOCTYPE html>
+   <html>
+     <body>
+       <p>Hello World</p>
+     </body>
+   </html>
+   ```
 
 ### loadData
 
@@ -1343,6 +1340,24 @@ struct Index {
 }
 ```
 
+HTML file to be loaded:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+    <meta charset="utf-8">
+    <body>
+        Hello world!
+    </body>
+    <script type="text/javascript">
+    function htmlTest() {
+        str = objName.test("test function")
+        console.log('objName.test result:'+ str)
+    }
+</script>
+</html>
+```
+
 ### runJavaScript
 
 runJavaScript(script: string, callback : AsyncCallback\<string>): void
@@ -1406,6 +1421,24 @@ struct WebComponent {
 }
 ```
 
+HTML file to be loaded:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <body>
+      Hello world!
+  </body>
+  <script type="text/javascript">
+  function test() {
+      console.log('Ark WebComponent')
+      return "This value is from index.html"
+  }
+  </script>
+</html>
+```
+
 ### runJavaScript
 
 runJavaScript(script: string): Promise\<string>
@@ -1444,11 +1477,9 @@ import web_webview from '@ohos.web.webview'
 @Component
 struct WebComponent {
   controller: web_webview.WebviewController = new web_webview.WebviewController();
-  @State webResult: string = '';
 
   build() {
     Column() {
-      Text(this.webResult).fontSize(20)
       Web({ src: $rawfile('index.html'), controller: this.controller })
         .javaScriptAccess(true)
         .onPageEnd(e => {
@@ -1470,6 +1501,23 @@ struct WebComponent {
 }
 ```
 
+HTML file to be loaded:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <body>
+      Hello world!
+  </body>
+  <script type="text/javascript">
+  function test() {
+      console.log('Ark WebComponent')
+      return "This value is from index.html"
+  }
+  </script>
+</html>
+```
 
 ### runJavaScriptExt<sup>10+</sup>
 
@@ -1569,8 +1617,11 @@ struct WebComponent {
     }
   }
 }
+```
 
-//index.html
+HTML file to be loaded:
+```html
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en-gb">
 <body>
@@ -1681,8 +1732,11 @@ struct WebComponent {
     }
   }
 }
+```
 
-//index.html
+HTML file to be loaded:
+```html
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en-gb">
 <body>
@@ -2178,14 +2232,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
           }
         })
-      Web({ src: $rawfile('xxx.html'), controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -2973,14 +3028,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
           }
         })
-      Web({ src: 'www.example.com', controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -3045,14 +3101,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
           }
         })
-      Web({ src: 'www.example.com', controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -3123,8 +3180,9 @@ struct WebComponent {
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -3640,7 +3698,7 @@ struct WebComponent {
         .onClick(() => {
           try {
             let state = this.controller.serializeWebState();
-            // Obtain the value of globalThis.cacheDir from MainAbility.ts.
+            // globalThis.cacheDir is obtained from EntryAbility.ts.
             let path = globalThis.cacheDir;
             path += '/WebState';
             // Synchronously open a file.
@@ -3657,14 +3715,14 @@ struct WebComponent {
 }
 ```
 
-2. Modify **MainAbility.ts**.
+2. Modify the **EntryAbility.ts** file.
 Obtain the path of the application cache file.
 ```ts
 // xxx.ts
 import UIAbility from '@ohos.app.ability.UIAbility';
 import web_webview from '@ohos.web.webview';
 
-export default class MainAbility extends UIAbility {
+export default class EntryAbility extends UIAbility {
     onCreate(want, launchParam) {
         // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page.
         globalThis.cacheDir = this.context.cacheDir;
@@ -3712,7 +3770,7 @@ struct WebComponent {
       Button('RestoreWebState')
         .onClick(() => {
           try {
-            // Obtain the value of globalThis.cacheDir from MainAbility.ts.
+            // globalThis.cacheDir is obtained from EntryAbility.ts.
             let path = globalThis.cacheDir;
             path += '/WebState';
             // Synchronously open a file.
@@ -3739,14 +3797,14 @@ struct WebComponent {
 }
 ```
 
-2. Modify **MainAbility.ts**.
+2. Modify the **EntryAbility.ts** file.
 Obtain the path of the application cache file.
 ```ts
 // xxx.ts
 import UIAbility from '@ohos.app.ability.UIAbility';
 import web_webview from '@ohos.web.webview';
 
-export default class MainAbility extends UIAbility {
+export default class EntryAbility extends UIAbility {
     onCreate(want, launchParam) {
         // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page.
         globalThis.cacheDir = this.context.cacheDir;
@@ -6230,6 +6288,6 @@ Describes the mode in which the **\<Web>** component uses HTTPDNS.
 
 | Name         | Value| Description                                     |
 | ------------- | -- |----------------------------------------- |
-| Off           | 0 |HTTPDNS is not used. This value can be used to revoke the previously used HTTPDNS configuration.|
-| Auto          | 1 |HTTPDNS is used in automatic mode. When the specified HTTPDNS server is unavailable for resolution, the component will fall back to the system DNS server.|
-| SecureOnly    | 2 |The specified HTTPDNS server is forcibly used for DNS resolution.|
+| Off                                 | 0 |HTTPDNS is not used. This value can be used to revoke the previously used HTTPDNS configuration.|
+| Auto                               | 1 |HTTPDNS is used in automatic mode. When the specified HTTPDNS server is unavailable for resolution, the component will fall back to the system DNS server.|
+| SecureOnly                | 2 |The specified HTTPDNS server is forcibly used for DNS resolution.|
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 5e2e776bf3..33d3ff7fb5 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
@@ -87,28 +87,28 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
 
   Example of loading local resource files in the sandbox:
 
-  1. Use [globalthis](../../application-models/uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) to obtain the path of the sandbox.
-     ```ts
-     // xxx.ets
-     import web_webview from '@ohos.web.webview'
-     let url = 'file://' + globalThis.filesDir + '/xxx.html'
-
-     @Entry
-     @Component
-     struct WebComponent {
-       controller: web_webview.WebviewController = new web_webview.WebviewController()
-       build() {
-         Column() {
-           // Load the files in the sandbox.
-           Web({ src: url, controller: this.controller })
-         }
-       }
-     }
-     ```
+  1. Use [globalthis](../../application-models/uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-ui-page) to obtain the path of the sandbox.
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  let url = 'file://' + globalThis.filesDir + '/index.html'
 
-  2. Modify the **MainAbility.ts** file.
-  
-     The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining the Application Development Path](../../application-models/application-context-stage.md#obtaining-the-application-development-path).
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: web_webview.WebviewController = new web_webview.WebviewController()
+    build() {
+      Column() {
+        // Load the files in the sandbox.
+        Web({ src: url, controller: this.controller })
+      }
+    }
+  }
+  ```
+
+  2. Modify the **EntryAbility.ts** file.
+
+     The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths).
      ```ts
      // xxx.ts
      import UIAbility from '@ohos.app.ability.UIAbility';
@@ -123,6 +123,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
      }
      ```
 
+     HTML file to be loaded:
      ```html
      <!-- index.html -->
      <!DOCTYPE html>
@@ -587,15 +588,16 @@ Sets whether to display the horizontal scrollbar, including the default system s
     controller: web_webview.WebviewController = new web_webview.WebviewController()
     build() {
       Column() {
-        Web({ src: 'www.example.com', controller: this.controller })
+        Web({ src: $rawfile('index.html'), controller: this.controller })
         .horizontalScrollBarAccess(true)
       }
     }
   }
   ```
 
+  HTML file to be loaded:
   ```html
-  <!--xxx.html-->
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -640,15 +642,16 @@ Sets whether to display the vertical scrollbar, including the default system scr
     controller: web_webview.WebviewController = new web_webview.WebviewController()
     build() {
       Column() {
-        Web({ src: 'www.example.com', controller: this.controller })
+        Web({ src: $rawfile('index.html'), controller: this.controller })
         .verticalScrollBarAccess(true)
       }
     }
   }
   ```
 
+  HTML file to be loaded:
   ```html
-  <!--xxx.html-->
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -669,6 +672,11 @@ Sets whether to display the vertical scrollbar, including the default system scr
   </html>
   ```
 
+### password
+
+password(password: boolean)
+
+Sets whether the password should be saved. This API is a void API.
 
 ### cacheMode
 
@@ -1236,6 +1244,18 @@ Sets whether to enable forcible dark mode for the web page. By default, this fea
   }
   ```
 
+### tableData
+
+tableData(tableData: boolean)
+
+Sets whether form data should be saved. This API is a void API.
+
+### wideViewModeAccess
+
+wideViewModeAccess(wideViewModeAccess: boolean)
+
+Sets whether to support the viewport attribute of the HTML **\<meta>** tag. This API is a void API.
+
 ### pinchSmooth<sup>9+</sup>
 
 pinchSmooth(isEnabled: boolean)
@@ -1420,7 +1440,7 @@ 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: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onAlert((event) => {
             console.log("event.url:" + event.url)
             console.log("event.message:" + event.message)
@@ -1450,8 +1470,9 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1502,7 +1523,7 @@ Called when this page is about to exit after the user refreshes or closes the pa
 
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onBeforeUnload((event) => {
             console.log("event.url:" + event.url)
             console.log("event.message:" + event.message)
@@ -1532,8 +1553,9 @@ Called when this page is about to exit after the user refreshes or closes the pa
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1584,7 +1606,7 @@ Called when **confirm()** is invoked by the web page.
 
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onConfirm((event) => {
             console.log("event.url:" + event.url)
             console.log("event.message:" + event.message)
@@ -1614,8 +1636,9 @@ Called when **confirm()** is invoked by the web page.
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1673,7 +1696,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
 
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onPrompt((event) => {
             console.log("url:" + event.url)
             console.log("message:" + event.message)
@@ -1704,8 +1727,9 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1776,6 +1800,8 @@ Called to notify the host application of a JavaScript console message.
 
 onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
 
+Instructs the main application to start downloading a file.
+
 **Parameters**
 
 | Name               | Type         | Description                               |
@@ -2084,6 +2110,26 @@ Called when loading of the web page is complete. This API is used by an applicat
   }
   ```
 
+### onSslErrorReceive<sup>(deprecated)</sup>
+
+onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)
+
+Called when an SSL error occurs during resource loading.
+
+> **NOTE**
+>
+> This API is supported since API version 8 and deprecated since API version 9. You are advised to use [onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9) instead.
+
+### onFileSelectorShow<sup>(deprecated)</sup>
+
+onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
+
+Called to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
+
+> **NOTE**
+>
+> This API is supported since API version 8 and deprecated since API version 9. You are advised to use [onShowFileSelector<sup>9+</sup>](#onshowfileselector9) instead.
+
 ### onRenderExited<sup>9+</sup>
 
 onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
@@ -3308,7 +3354,7 @@ Called when the **\<Web>** component is about to access a URL. This API is used
 
 | Name | Type                                    | Description     |
 | ------- | ---------------------------------------- | --------- |
-| request | [Webresourcerequest](#webresourcerequest) | Information about the URL request.|
+| request | [WebResourceRequest](#webresourcerequest) | Information about the URL request.|
 
 **Return value**
 
@@ -4933,6 +4979,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava
   }
   ```
 
+  HTML file to be loaded:
   ```html
   <!-- index.html -->
   <!DOCTYPE html>
@@ -4993,7 +5040,7 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip
     }
   }
   ```
-
+  HTML file to be loaded:
   ```html
   <!-- index.html -->
   <!DOCTYPE html>
@@ -5009,7 +5056,6 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip
     }
     </script>
   </html>
-
   ```
 
 ### stop<sup>(deprecated)</sup>
@@ -5075,17 +5121,12 @@ This API is deprecated since API version 9. You are advised to use [clearHistory
 Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
 
 ### setCookie<sup>(deprecated)</sup>
-setCookie(url: string, value: string): boolean
 
-Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
-This API is deprecated since API version 9. You are advised to use [setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie) instead.
+setCookie(): boolean
 
-**Parameters**
+Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
 
-| Name  | Type  | Mandatory  | Default Value | Description             |
-| ----- | ------ | ---- | ---- | ----------------- |
-| url   | string | Yes   | -    | URL of the cookie to set. A complete URL is recommended.|
-| value | string | Yes   | -    | Value of the cookie to set.        |
+This API is deprecated since API version 9. You are advised to use [setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie) instead.
 
 **Return value**
 
@@ -5093,31 +5134,12 @@ This API is deprecated since API version 9. You are advised to use [setCookie<su
 | ------- | ------------- |
 | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
 
-**Example**
-
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController()
-
-    build() {
-      Column() {
-        Button('setCookie')
-          .onClick(() => {
-            let result = this.controller.getCookieManager().setCookie("https://www.example.com", "a=b")
-            console.log("result: " + result)
-          })
-        Web({ src: 'www.example.com', controller: this.controller })
-      }
-    }
-  }
-  ```
 ### saveCookie<sup>(deprecated)</sup>
+
 saveCookie(): boolean
 
 Saves the cookies in the memory to the drive. This API returns the result synchronously.
+
 This API is deprecated since API version 9. You are advised to use [saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync) instead.
 
 **Return value**
@@ -5125,25 +5147,3 @@ This API is deprecated since API version 9. You are advised to use [saveCookieAs
 | Type     | Description                  |
 | ------- | -------------------- |
 | boolean | Operation result.|
-
-**Example**
-
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController()
-
-    build() {
-      Column() {
-        Button('saveCookie')
-          .onClick(() => {
-            let result = this.controller.getCookieManager().saveCookie()
-            console.log("result: " + result)
-          })
-        Web({ src: 'www.example.com', controller: this.controller })
-      }
-    }
-  }
-  ```
diff --git a/en/application-dev/web/web-debugging-with-devtools.md b/en/application-dev/web/web-debugging-with-devtools.md
index 3a38a48ab1..d5a1b57085 100644
--- a/en/application-dev/web/web-debugging-with-devtools.md
+++ b/en/application-dev/web/web-debugging-with-devtools.md
@@ -28,8 +28,17 @@ To use DevTools for frontend page debugging, perform the following steps:
      }
    }
    ```
+2. Declare the required permission in the **module.json5** file of the application project in DevEco Studio.
 
-2. Connect your device to a PC, and configure port mapping on the PC as follows:
+   ```
+   "requestPermissions":[
+      {
+        "name" : "ohos.permission.INTERNET"
+      }
+    ]
+   ```
+
+3. Connect your device to a PC, and configure port mapping on the PC as follows:
 
    ```
    // Configure port mapping.
@@ -38,7 +47,7 @@ To use DevTools for frontend page debugging, perform the following steps:
    hdc fport ls
    ```
 
-3. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows:
+4. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows:
 
      **Figure 1** Page debugging effect 
 
-- 
GitLab