Skip to content

Commit 63258e3

Browse files
sunwu51sunwu51
committed
add fe debug
1 parent 29042f0 commit 63258e3

39 files changed

+11831
-0
lines changed

‎22.11/fe_前端debug.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# 前端项目debug
2+
这篇文章中将讨论如何debug以下几个项目场景
3+
- 1 webpack + react (create-react-app)
4+
- 2 vite + react (最轻量的react用法)
5+
- 3 vite + lit (my favorite)
6+
# 万能debug方法，直接浏览器debug
7+
直接在浏览器上的调试方式，在react的chrome开发插件的支持下，进入查看源码在这可以打断点。
8+
![image](https://i.imgur.com/rorDXN2.gif)
9+
# creat-react-app
10+
创建项目，该项目在当前目录的`my-react-app1`下，react版本当前是`^18.2.0`
11+
```
12+
npx create-react-app my-react-app1
13+
cd my-react-app1
14+
npm start
15+
```
16+
在vscode上debug，需要添加`.vscode/launch.json`文件，内容如下，该文件的意思是，在vscode debug中添加了一个配置，名为`Launch Chrome`，他的作用是打开`localhost:3000`并且会关联当前项目根目录来做`debug`，launch并不负责启动`npm start`，故需要我们先npm start之后再launch。
17+
```json
18+
{
19+
"version": "0.2.0",
20+
"configurations": [
21+
{
22+
"type": "chrome",
23+
"request": "launch",
24+
"name": "Launch Chrome",
25+
"url": "http://localhost:3000", // 改为自己的目标 url
26+
"sourceMaps": true,
27+
"webRoot": "${workspaceFolder}"
28+
}
29+
]
30+
}
31+
```
32+
一定记得先运行`npm start`让页面先起来，再debug
33+
34+
![image](https://i.imgur.com/JiKq7Ub.gif)
35+
36+
vscode launch的方式，会新启动一个chrome匿名用户，不能用原来的cookie和插件，这一点比较坑。
37+
![image](https://i.imgur.com/MSFZDYt.png)
38+
39+
40+
# vite + react
41+
```
42+
npm create vite
43+
// ...选择react + js + 项目名 my-react-app2
44+
cd my-react-app2
45+
npm i
46+
npx vite
47+
```
48+
跟webpack的一模一样，只需要改下url的端口就行了，我这里vite启动的`http://localhost:5173`，改完后和上面create-react-app效果一样。
49+
50+
![image](https://i.imgur.com/NOikpvn.png)
51+
52+
# vite + lit
53+
Lit也是一样的做法。
54+
![image](https://i.imgur.com/xDPKBkZ.png)
55+
56+
# gitpod
57+

‎22.11/my-lit-app/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎22.11/my-lit-app/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Lit</title>
8+
<link rel="stylesheet" href="./src/index.css" />
9+
<script type="module" src="/src/my-element.js"></script>
10+
</head>
11+
<body>
12+
<my-element>
13+
<h1>Vite + Lit</h1>
14+
</my-element>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)