feat: 前端最全调试技巧写完

doggyegg · Dec 27, 2024 · 38e7993 · 38e7993
1 parent 36d8f82
commit 38e7993
Show file tree

Hide file tree

Showing 22 changed files with 70 additions and 9 deletions.
diff --git a/docs/.vitepress/utils.ts b/docs/.vitepress/utils.ts
@@ -21,8 +21,8 @@ export default {
                 link: "/front/engi/microFront/",
               },
               {
-                text: "Npm发包流程",
-                link: "/front/engi/npmPublish/",
+                text: "搭建你的专属组件库",
+                link: "/front/engi/components/",
               },
             ],
           },

diff --git a/docs/front/base/debugger/066667d7893b23abca98b83c3da5824.jpg b/docs/front/base/debugger/066667d7893b23abca98b83c3da5824.jpg
diff --git a/docs/front/base/debugger/0cc78b4867c80022ed0bf66bcb75378.jpg b/docs/front/base/debugger/0cc78b4867c80022ed0bf66bcb75378.jpg
diff --git a/docs/front/base/debugger/1512ea71c859e7065475f6a31ed9334.png b/docs/front/base/debugger/1512ea71c859e7065475f6a31ed9334.png
diff --git a/docs/front/base/debugger/2712da151208cae92edb2c1c70ed9f8.jpg b/docs/front/base/debugger/2712da151208cae92edb2c1c70ed9f8.jpg
diff --git a/docs/front/base/debugger/8b948186ddffae17ddbc764e7f9eaab.jpg b/docs/front/base/debugger/8b948186ddffae17ddbc764e7f9eaab.jpg
diff --git a/docs/front/base/debugger/b2deb8ae9e0838c6d72ca792dd54018.jpg b/docs/front/base/debugger/b2deb8ae9e0838c6d72ca792dd54018.jpg
diff --git a/docs/front/base/debugger/image-33.png b/docs/front/base/debugger/image-33.png
diff --git a/docs/front/base/debugger/image-34.png b/docs/front/base/debugger/image-34.png
diff --git a/docs/front/base/debugger/image-35.png b/docs/front/base/debugger/image-35.png
diff --git a/docs/front/base/debugger/image-36.png b/docs/front/base/debugger/image-36.png
diff --git a/docs/front/base/debugger/image-37.png b/docs/front/base/debugger/image-37.png
diff --git a/docs/front/base/debugger/image-38.png b/docs/front/base/debugger/image-38.png
diff --git a/docs/front/base/debugger/image-39.png b/docs/front/base/debugger/image-39.png
diff --git a/docs/front/base/debugger/image-40.png b/docs/front/base/debugger/image-40.png
diff --git a/docs/front/base/debugger/image-41.png b/docs/front/base/debugger/image-41.png
diff --git a/docs/front/base/debugger/image-42.png b/docs/front/base/debugger/image-42.png
diff --git a/docs/front/base/debugger/image-43.png b/docs/front/base/debugger/image-43.png
diff --git a/docs/front/base/debugger/image-44.png b/docs/front/base/debugger/image-44.png
diff --git a/docs/front/base/debugger/index.md b/docs/front/base/debugger/index.md
@@ -252,14 +252,75 @@ Network 该栏主要是针对浏览器网络进程做的抓包工具，所有网
 
 ![alt text](image-32.png)
 
-## 移动端调试
+## 移动端真机调试
 
-常见的移动端应用一般分为 H5，小程序，APP 等，我们从这 3 个终端来讲讲移动端的真机调试技巧
+常见的移动端应用一般分为 H5，小程序，APP 等，我们开发过程中通常会在电脑上使用模拟器如谷歌开发者工具模拟手机端，微信开发者工具真机预览模式，APP 一些三方真机模拟器（如逍遥模拟器），来简化移动端开发的难度，但是如果是真机上面，我们该如何调试呢？
 
 ### H5
 
+H5 我们在此定义为通过手机浏览器或某些 APP 中内嵌的 Webview 环境下运行的前端页面
+
+#### 逻辑层
+
+在 PC 浏览器开发中，我们通常使用浏览器开发者工具（控制台）来进行调试，在手机上我们能否也使用控制台来进行调试呢？答案是可以的，我们可以通过引入 vConsole 找个三方库来实现真机上运行控制台
+
+- 步骤：
+
+1. 在入口页（index.html）通过 CDN 引入 XConsole 插件，并且实例化
+   ![alt text](image-33.png)
+2. 在真机上运行，点击 VConsole 即可打开控制台，通过日志来进行问题排查
+   ![alt text](066667d7893b23abca98b83c3da5824.jpg)
+   ![alt text](2712da151208cae92edb2c1c70ed9f8.jpg)
+
+#### 样式层
+
+通过 VConsole 让我们可以在真机进行 JS 层面的调试，那么如何进行 Dom 及样式层面的调试呢？
+
+我们在此使用谷歌浏览器的 google-inspect 实现该需求
+
+- 步骤：
+
+1. 手机连接数据线到电脑上
+2. 打开手机开发者模式，不同手机开启的方式不同，一般都是在手机系统版本号处多次点击，具体自行百度
+   ![alt text](0cc78b4867c80022ed0bf66bcb75378.jpg)
+3. 开启开发者模式后，在手机设置中的开发者选项中打开 USB 调试
+   ![alt text](b2deb8ae9e0838c6d72ca792dd54018.jpg)
+4. 在 PC 浏览器中访问 chrome://inspect/#devices，注意这里需要翻墙，访问后，你手机上访问的浏览器资源会在该页面显示，找到对应页面点击 inspect 即可映射资源到 PC 浏览器上进行调试
+
+![alt text](1512ea71c859e7065475f6a31ed9334.png)
+
 ### 小程序
 
-### APP
+小程序本质上及为三方 APP 中内置的 Webview 环境，如微信小程序，虽然使用了双线程架构，本质上运行的环境还是 WebView,在此我们以微信小程序进行演示
+
+#### 逻辑层
+
+相比与 H5，小程序已经内置了自己的开发者工具供我们在真机上使用，只需要在手机小程序上开启即可
+
+![alt text](image-34.png)
+![alt text](image-35.png)
+![alt text](image-36.png)
+
+#### 样式层
+
+在样式调试上，微信开发者工具也已经内置好了一套完善的模式-**真机调试**，我们可以直接在真机调试下进行 Dom 层的调试
+
+- 步骤：
+
+1. 电脑上打开微信开发者工具，点击真机调试，并且用手机扫描二维码
+   ![alt text](image-37.png)
+2. 扫描二维码后，电脑会自动打开真机调试界面，即可将真机映射到电脑上进行调试
+   ![alt text](image-38.png)
+   ![alt text](8b948186ddffae17ddbc764e7f9eaab.jpg)
+
+### 抓包
+
+我们的互联网在进行数据交互时，无论是获取静态资源如网页，图片，样式等，还是接口数据，本质上都是数据包的传递，而抓包指的就是在数据传递过程中，进行数据捕获，一般用于发生异常时，先排查是后端数据源的问题，还是前端展示的问题。
+
+在 PC 端，我们通过浏览器开发者工具的 Network 去查看资源，本质上也是抓包，只是开发者工具已经帮我们简化了该功能，那么在真机上，我们如何进行抓包呢？
+
+市面上有许多抓包工具供我们使用，如老牌的 Charles,Fiddler，以及国产开发的新锐 Whistle,大家可以自行选择，在此我们使用 Whistle 来进行演示
+
+#### Whistle
 
-。。。未完待续
+[whistle 使用教程](https://blog.csdn.net/qq_42445025/article/details/121796927)
diff --git a/docs/front/engi/components/index.md b/docs/front/engi/components/index.md
@@ -0,0 +1,3 @@
+# 搭建你的专属组件库
+
+敬请期待
diff --git a/docs/front/engi/npmPublish/index.md b/docs/front/engi/npmPublish/index.md