鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）

鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）
合集 - 鸿蒙入门实战全套（核心知识点）(62)
1.鸿蒙HarmonyOS实战-ArkTS语言（基本语法）03-20 2.鸿蒙HarmonyOS实战-ArkTS语言（状态管理）03-21 3.鸿蒙HarmonyOS实战-ArkTS语言（渲染控制）03-21 4.鸿蒙HarmonyOS实战-ArkUI组件（Row/Column）03-22 5.鸿蒙HarmonyOS实战-ArkUI组件（Stack）03-23 6.鸿蒙HarmonyOS实战-ArkUI组件（Flex）03-24 7.鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）03-25 8.鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）03-26 9.鸿蒙HarmonyOS实战-ArkUI组件（mediaquery）03-27 10.鸿蒙HarmonyOS实战-ArkUI组件（List）03-29 11.鸿蒙HarmonyOS实战-ArkUI组件（Grid/GridItem）03-29 12.鸿蒙HarmonyOS实战-ArkUI组件（Swiper）03-30 13.鸿蒙HarmonyOS实战-ArkUI组件（Button）04-01 14.鸿蒙HarmonyOS实战-ArkUI组件（Radio）04-02 15.鸿蒙HarmonyOS实战-ArkUI组件（Toggle）04-02 16.鸿蒙HarmonyOS实战-ArkUI组件（Progress）04-03 17.鸿蒙HarmonyOS实战-ArkUI组件（Text/Span）04-03 18.鸿蒙HarmonyOS实战-ArkUI组件（TextInput/TextArea）04-07 19.鸿蒙HarmonyOS实战-ArkUI组件（CustomDialog）04-08 20.鸿蒙HarmonyOS实战-ArkUI组件（Video）04-09 21.鸿蒙HarmonyOS实战-ArkUI组件（Popup）04-10 22.鸿蒙HarmonyOS实战-ArkUI组件（Menu）04-11 23.鸿蒙HarmonyOS实战-ArkUI组件（页面路由）04-12 24.鸿蒙HarmonyOS实战-ArkUI组件（Navigation）04-13 25.鸿蒙HarmonyOS实战-ArkUI组件（Tabs）04-15 26.鸿蒙HarmonyOS实战-ArkUI组件（Image）04-16 27.鸿蒙HarmonyOS实战-ArkUI组件（Shape）04-17 28.鸿蒙HarmonyOS实战-ArkUI组件（Canvas）04-18 29.鸿蒙HarmonyOS实战-ArkUI动画（布局更新动画）04-19 30.鸿蒙HarmonyO实战-ArkUI动画（组件内转场动画）04-20 31.鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）04-23 32.鸿蒙HarmonyOS实战-ArkUI动画（页面转场动画）04-24 33.鸿蒙HarmonyOS实战-ArkUI事件（触屏事件）04-25 34.鸿蒙HarmonyOS实战-ArkUI事件（键鼠事件）04-26 35.鸿蒙HarmonyOS实战-ArkUI事件（焦点事件）05-07 36.鸿蒙HarmonyOS实战-ArkUI事件（手势方法）05-08 37.鸿蒙HarmonyOS实战-ArkUI事件（单一手势）05-09 38.鸿蒙HarmonyOS实战-ArkUI事件（组合手势）05-12 39.鸿蒙HarmonyOS实战-Stage模型（概述和组件配置）05-13 40.鸿蒙HarmonyOS实战-Stage模型（UIAbility组件）05-14 41.鸿蒙HarmonyOS实战-Stage模型（ExtensionAbility组件）05-15 42.鸿蒙HarmonyOS实战-Stage模型（服务卡片介绍和运行机制）05-16 43.鸿蒙HarmonyOS实战-Stage模型（服务卡片的模块和创建）05-17 44.鸿蒙HarmonyOS实战-Stage模型（开发卡片页面）05-18 45.鸿蒙HarmonyOS实战-Stage模型（开发卡片事件）05-20 46.鸿蒙HarmonyOS实战-Stage模型（卡片数据交互）05-21 47.鸿蒙HarmonyOS实战-Stage模型（AbilityStage组件容器）05-22 48.鸿蒙HarmonyOS实战-Stage模型（应用上下文Context）05-23 49.鸿蒙HarmonyOS实战-Stage模型（信息传递载体Want）05-24 50.鸿蒙HarmonyOS实战-Stage模型（进程模型）05-25 51.鸿蒙HarmonyOS实战-Stage模型（线程模型）05-27 52.鸿蒙HarmonyOS实战-Web组件（基本使用和属性）05-28 53.鸿蒙HarmonyOS实战-Web组件（前端函数和应用侧函数相互调用）05-29 54.鸿蒙HarmonyOS实战-Web组件（页面跳转和浏览记录）05-30 55.鸿蒙HarmonyOS实战-Web组件（Cookie及数据存储）05-31
56.鸿蒙HarmonyOS实战-Web组件（请求响应和页面调试）06-01
57.鸿蒙HarmonyOS实战-ArkTS语言基础类库（概述）06-03 58.鸿蒙HarmonyOS实战-ArkTS语言基础类库（并发）06-04 59.鸿蒙HarmonyOS实战-ArkTS语言基础类库（容器类库）06-05 60.鸿蒙HarmonyOS实战-ArkTS语言基础类库（XML）06-06 61.鸿蒙HarmonyOS实战-ArkTS语言基础类库（通知）06-07 62.鸿蒙HarmonyOS实战-窗口管理06-11
收起

🚀前言

请求响应是指客户端发送请求给服务器，服务器接收到请求后返回的响应。响应包含了服务器处理请求的结果，并将结果返回给客户端。

页面调试是指在开发过程中，通过调试工具分析页面的运行状况，查找问题和修复错误。常用的页面调试工具包括浏览器的开发者工具和调试插件，可以检查页面的网络请求、HTML代码、CSS样式和JavaScript代码等，并对其进行调试和修改。

请求响应和页面调试在Web开发中都非常重要。通过分析请求和响应的信息，开发人员可以了解每个请求的状态、数据和处理结果，有助于排查和解决问题。而页面调试则可以帮助开发人员快速定位和修复页面上的错误，优化页面的性能和用户体验。

🚀一、请求响应和页面调试

🔎1.请求响应

🦋1.1 前端代码
```
html>
<html>
<head>
    <meta charset="utf-8">
    <title>exampletitle>
head>
<body>

<a href="https://www.example.com/test.html">intercept test!a>
body>
html>
```
🦋1.2 应用侧代码

在HarmonyOS中，onInterceptRequest()是一个接口，用于拦截网络请求并进行处理。它是HarmonyOS的网络框架提供的一种扩展机制，可以在网络请求发起之前拦截请求，并进行一些自定义的操作。

当一个网络请求发起时，HarmonyOS的网络框架会首先调用onInterceptRequest()接口。在该接口中，你可以对请求进行一些处理，例如修改请求的URL、添加请求头、修改请求参数等。还可以在此处拦截请求，返回自定义的响应结果，以实现一些常见的操作，如模拟网络请求，拦截广告请求等。
```
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  responseResource: WebResourceResponse = new WebResourceResponse()
  // 开发者自定义响应数据
  @State webdata: string = "\n" +
  "\n"+
  "\n"+
  "intercept test\n"+
  "\n"+
  "\n"+
  "intercept test
\n"+
  "\n"+
  ""
  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onInterceptRequest((event?: Record): WebResourceResponse => {
          if (!event) {
            return new WebResourceResponse();
          }
          let mRequest: WebResourceRequest = event.request as WebResourceRequest;
          console.info('TAGLee: url:'+ mRequest.getRequestUrl());
          //拦截页面请求，如果加载的url判断与目标url一致则返回自定义加载结果webdata
          if(mRequest.getRequestUrl() === 'https://www.example.com/test.html'){
            // 构造响应数据
            this.responseResource.setResponseData(this.webdata);
            this.responseResource.setResponseEncoding('utf-8');
            this.responseResource.setResponseMimeType('text/html');
            this.responseResource.setResponseCode(200);
            this.responseResource.setReasonMessage('OK');
            return this.responseResource;
          }
          return;
        })
    }
  }
}
```
🔎2.页面调试

1、开启调试

在HarmonyOS中，setWebDebuggingAccess()接口用于设置是否允许调试Web视图。

setWebDebuggingAccess()接口的语法如下：
```
setWebDebuggingAccess(boolean debuggable);
```
参数debuggable为boolean型，表示是否允许调试Web视图。如果debuggable为true，则允许调试Web视图；如果debuggable为false，则禁止调试Web视图。

此接口需要在合适的地方调用，例如在应用程序的入口Activity中或者WebView的初始化代码中调用。调用该方法后，系统将根据参数的值来决定是否允许调试Web视图。

2、配置端口
```
// 添加映射 
hdc fport tcp:9222 tcp:9222 
// 查看映射 
hdc fport ls
```
3、在PC端chrome浏览器地址栏中输入chrome://inspect/#devices，页面识别到设备后，就可以开始页面调试

🚀写在最后
- 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
- 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
相关阅读:
【数据结构】单值二叉树 & 相同的树 & 翻转二叉树（五）
长文解析Resnet50的算法原理
 Python编程字典创建
 SUSCTF2022 Misc-AUDIO&RA2
Javaweb之javascript的详细解析
 “Ubuntu终端闪退”的解决方法
 【Qt6】列表模型——抽象基类
 http协议与apache
mysql的服启动以及用户登录
 jwt ---- json web token
原文地址：https://www.cnblogs.com/shudaoshan/p/18226360

🚀前言

🚀一、请求响应和页面调试

🔎1.请求响应

🦋1.1 前端代码

🦋1.2 应用侧代码

intercept test

🔎2.页面调试

🚀写在最后