22 篇博文 含有标签「debug」

问题描述​

最近，在安装完vue-router之后，在写ts的时候，出现下面的错误,起初我以为是版本不兼容，在重装了多次版本后还是没有解决，最后通过直觉告诉我是删除node_modules然后使用cnpm进行安装，后来通过这个方法解决了。

Error on importing VueAnalytics to main.ts in Vue CLI (Vue3)

解决办法​

1. 删除node_modules文件夹。

2. 使用cnpm进行安装。

cnpm i

快捷指令速查表​

修改Dev Tools的主题​

• 修改为dark主题

dark theme

• 修改为白色主题 light theme

截屏​

screenshot

改变调试窗口的位置​

1. dock to right
2. dock to left
3. dock to bottom

常用Tab介绍​

1. Element​

• 查看页面在移动端布局的样子，可以点击下面的按钮

• 给目标元素添加样式

  首先选中元素，然后在下面添加样式

• 让hover永驻

选中目标元素然后点击下面的内容

• 只修改列表项中的某一个

选中目标元素点击cls

• 复制样式并粘贴样式

选中目标样式，然后点击copy styles

选中需要粘贴样式的位置，然后粘贴到下面的位置

Computed​

这个tab栏主要记载了当前页面都应用了哪些样式，通过点击可以跳转到这些样式。

• Show all与Group

Layout​

在Layout标签下可以调试Grid布局和Flex布局。

勾选flex元素可以给flex元素加上横线边框。

可以通过styles面板中的点击图标来测试flex的其他属性。

Event Listeners​

该面板可以查看当前页面所有的监听事件。

报错提示​

声明了“ React”，但从未读取其值。

错误原因​

因为是使用的基于TS的react模板脚手架，因此在安装依赖的时候，必须安装带有@types/xxx的文件。

解决办法​

npm install -D @types/react

问题描述​

博主在学习Next应用的时候，使用express作为后台，部署在本地一切正常，但是部署在字节的轻服务上便出现如下错误。

解决过程​

尝试1：尝试是否是跨域问题​

刚开始遇到这个错误，我判断可能是跨域问题，后来经排查不是，因为如果是跨域问题，自定义的路由不可能被访问成功，但是我通过postman访问自定义路由是能够成功的，说明不是跨域的问题，而且我已经配置了下面的语句。

app.use(cors());  // 解决跨域

尝试2：修改静态资源的路径​

因为只有静态资源无法访问，说明可能是配置静态资源的中间件出来问题，所以我刚开始在网上找到了这样的一个解决方案，即下面的语句。

app.use(express.static(path.join(__dirname, 'build', 'public')));

上面的解决也是无效，后来我咨询了字节轻服务的相关工程师，原来是因为path.join会拼接字符串，但是我的路径中并没有build这个文件夹，所以报错，我原本还以为这两个文件夹是并列关系，原来是拼接关系。

尝试3：修改为绝对路径（最终解决方案）​

在字节轻服务工程师的帮助下，我才用了绝对路径的方式来公开静态资源，这一次成功了~感谢字节轻服务的工程师。

app.use(express.static(path.join(__dirname, 'public')));

问题原因​

在express公开静态资源的时候，如果不加入绝对路径，会按照云平台中的node执行的位置去找，自然会出现找不到的情况，自然会出现404的错误，但是我们如果加上了绝对路径dirname则会避免这个问题，直接找到这个资源的绝对路径。

参考资料​

• 在 Express 中提供静态文件
• Node.js 中 __dirname 和 ./ 的区别

问题描述​

今天在学习Flex布局的时候，首先定义了一个div盒子，但是页面竟然出现了三个div盒子，我首先想到可能是浏览器插件对样式进行了修改，后来果然是这样。

排查方法​

1. 首先打开浏览器的网络页面。

2. 清空所有的请求。

3. 刷新页面。

4. 任意点击一个非本地的请求，从Request URL中判断是哪个插件的请求。

排查结果​

原来是SurfingKeys这个插件修改了我们的样式，我们只需将该插件设置为点击时使用，即可恢复原状。​

问题描述​

当我使用React脚手架创建一个项目后，发现保存代码后，浏览器并不会自动刷新，需要我手动刷新后，才会显示出来。

问题解决方案​

在package.json同级目录下新建一个文件名为.env,并添加下面的内容

FAST_REFRESH=false

停止项目，重新npm start​

警告原因​

href="javascript:;"

上面这段代码的存在。

解决办法​

使用href="/#"代替

潜在问题​

虽然上述方法可以解决Rract的警告问题，但是可能会影响到页面跳转功能的实现，如果你想使用的是Link-Button的功能，可以考虑下面的方法

<Button type="link">Link Button</Button>

错误原因​

通过sort这个API对全是BigInt的数组进行排序导致的错误 sort((num1,num2) => num1 - num2)

解决办法​

使用下面的排序方式

sort((a, b) => (a < b) ? -1 : ((a > b) ? 1 : 0));

报错​

原因​

• React在传参的时候，出现错误，该传给count属性一个值的时候，传给了一个对象

问题描述​

问题原因​

• React发现了带下划线的组件命名，将带下划线的组件命名改为驼峰命名即可