add fe debug

sunwu51 · Nov 6, 2022 · 63258e3 · 63258e3
1 parent 29042f0
commit 63258e3
Show file tree

Hide file tree

Showing 39 changed files with 11,831 additions and 0 deletions.
diff --git a/22.11/fe_前端debug.md b/22.11/fe_前端debug.md
@@ -0,0 +1,57 @@
+# 前端项目debug
+这篇文章中将讨论如何debug以下几个项目场景
+- 1 webpack + react (create-react-app)
+- 2 vite + react (最轻量的react用法)
+- 3 vite + lit (my favorite)
+# 万能debug方法，直接浏览器debug
+直接在浏览器上的调试方式，在react的chrome开发插件的支持下，进入查看源码在这可以打断点。
+![image](https://i.imgur.com/rorDXN2.gif)
+# creat-react-app
+创建项目，该项目在当前目录的`my-react-app1`下，react版本当前是`^18.2.0`
+```
+npx create-react-app my-react-app1
+cd my-react-app1
+npm start
+```
+在vscode上debug，需要添加`.vscode/launch.json`文件，内容如下，该文件的意思是，在vscode debug中添加了一个配置，名为`Launch Chrome`，他的作用是打开`localhost:3000`并且会关联当前项目根目录来做`debug`，launch并不负责启动`npm start`，故需要我们先npm start之后再launch。
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome",
+      "url": "http://localhost:3000", // 改为自己的目标 url
+      "sourceMaps": true,
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
+```
+一定记得先运行`npm start`让页面先起来，再debug
+
+![image](https://i.imgur.com/JiKq7Ub.gif)
+
+vscode launch的方式，会新启动一个chrome匿名用户，不能用原来的cookie和插件，这一点比较坑。
+![image](https://i.imgur.com/MSFZDYt.png)
+
+
+# vite + react
+```
+npm create vite
+// ...选择react + js + 项目名 my-react-app2
+cd my-react-app2
+npm i
+npx vite
+```
+跟webpack的一模一样，只需要改下url的端口就行了，我这里vite启动的`http://localhost:5173`，改完后和上面create-react-app效果一样。
+
+![image](https://i.imgur.com/NOikpvn.png)
+
+# vite + lit
+Lit也是一样的做法。
+![image](https://i.imgur.com/xDPKBkZ.png)
+
+# gitpod
+
diff --git a/22.11/my-lit-app/.gitignore b/22.11/my-lit-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/22.11/my-lit-app/index.html b/22.11/my-lit-app/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="/src/my-element.js"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Vite + Lit</h1>
+    </my-element>
+  </body>
+</html>