跳到主要内容

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

Justindebug阅读需 1 分钟

快捷指令速查表

标题
快速打开Dev ToolsCtrl + Shift + i
打开命令菜单Ctrl + Shift + P
快速打开Dev ToolsCtrl + Shift + i
快速打开Dev ToolsCtrl + Shift + i
快速打开Dev ToolsCtrl + Shift + i
快速打开Dev ToolsCtrl + Shift + i
快速打开Dev ToolsCtrl + Shift + i
快速打开Dev ToolsCtrl + Shift + i
快速打开Dev ToolsCtrl + Shift + i

修改Dev Tools的主题

  • 修改为dark主题

dark theme

image.png

  • 修改为白色主题 light theme

image.png

截屏

screenshot

image.png

改变调试窗口的位置

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

常用Tab介绍

1. Element

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

image.png

  • 给目标元素添加样式

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

image.png

  • 让hover永驻

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

image.png

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

选中目标元素点击cls

image.png

  • 复制样式并粘贴样式

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

image.png

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

image.png

Computed

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

  • Show all与Group

image.png

Layout

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

image.png

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

image.png

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

image.png

Event Listeners

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

image.png


Justindebug阅读需 2 分钟

问题描述

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

image.png

解决过程

尝试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则会避免这个问题,直接找到这个资源的绝对路径。

参考资料


Justindebug阅读需 2 分钟

问题描述

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

排查方法

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

  2. 清空所有的请求。 image.png

  3. 刷新页面。 image.png

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

排查结果

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


Justindebug阅读需 1 分钟

问题描述

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

问题解决方案

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

FAST_REFRESH=false

停止项目,重新npm start


debug阅读需 1 分钟

警告原因

href="javascript:;"

上面这段代码的存在。

解决办法

使用href="/#"代替

潜在问题

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

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

debug阅读需 1 分钟

错误原因

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

解决办法

使用下面的排序方式

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

debug阅读需 1 分钟