bug处理（合集）

最新推荐文章于 2021-11-04 00:09:28 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2021-11-04 00:09:28 发布

阅读量420

点赞数 3

分类专栏：小知识点（报错、小知识）文章标签： css html javascript

本文链接：https://blog.csdn.net/tuzi007a/article/details/117666877

版权

小知识点（报错、小知识）专栏收录该内容

32 篇文章 1 订阅

订阅专栏

大家好，我是梅巴哥er。本篇用于总结做项目或学习过程中，遇到的bug或小知识点。

*注：该篇将永久更新。

本篇目录：

1，页面缩小导致页面下方滚动条问题

在这里插入图片描述
如图，当页面缩小时，会在下方出现滚动条。用户拉动滚动条，在后侧会显示一块空白区域。会影响用户体验。所以应该去掉这个滚动条。让页面缩小时，也不出现滚动条。

处理方法

body {
  overflow-x: hidden;
}
// 这种只可作为临时方法
// 实践证明，这个方法还会导致另一个问题
// 就是当页面恢复到全屏大小时，右侧滚动条会消失

另一种方法

右侧出现白框，是因为设置的最小宽度不对。最小宽度的值，应当是页面缩小时，下方出现滚动条时的屏幕尺寸。这种尺寸设置不对，是导致出现问题的直接原因。
在这里插入图片描述比如这个，当下方出现滚动条时，显示当前可视屏幕宽度是1015px，最小宽度大概可以取1000px，就没问题了。

.container {
  position: relative;
  min-width: 1000px;
}

2，dom批量处理css属性

cssText

用法介绍

var div = document.querySelector('div')
div.style.cssText = 'width: 100px; height: 200px; background-color: #fff;'

3，查看本机ip

打开cmd，输入指令ipconfig即可查看。

4，ios下的日期报错

/**
1，ios不能识别2021-06-11这种格式
2，ios不能识别24:00:00
正确写法如下：*/
var startTime = new Date('2021/06/11 11:00:00').getTime()
var endTime = new Date('2021/06/15 23:59:59').getTime()

update 2021-6-11

5，li在不同屏幕下的布局bug

在设定li的尺寸时，一定要多预留若干像素的尺寸，不然在某些设备的某些浏览器下，li可能会从框内掉下来。

6，jquery的$符号是怎么来的？

作为一个用原生做编程的懒人，我一直在想，document.querySelector.()这么长一大串，就不能简写吗？
于是，经过多次验证和搜索，得到了答案。

var $ = document.querySelector.bind(document);
用法同jq的$符号。比如$('#btn') , $('div') , $('.btn')等。
document.querySelectorAll.()缩写方法相同。

7，JS获取和设置css的伪元素

对于已经存在的::after或::before，可以进行获取和设置

var wg = window.getComputedStyle( document.querySelector('div'), ':before' ); //获取伪元素
var count = style.getPropertyValue("content"); //获取伪元素自带的content
style .setProperty('content', '我是修改后的内容'); //设置新内容

还有通用的js操作任何伪元素的方法
insertRule（非ie）与addRule（ie）

document.styleSheets[0].addRule('#waveDisk::after','width: 10px'); 
document.styleSheets[0].addRule('#waveDisk::after','height: 10px'); 
document.styleSheets[0].addRule('#waveDisk::before','width: 10px'); 
document.styleSheets[0].addRule('#waveDisk::before','height: 10px'); 
document.styleSheets[0].insertRule('#waveDisk::after { width: 10px }', 0); 
document.styleSheets[0].insertRule('#waveDisk::after { height: 10px }', 0); 
document.styleSheets[0].insertRule('#waveDisk::before { width: 10px }', 0); 
document.styleSheets[0].insertRule('#waveDisk::before { height: 10px }', 0);

8，关于css类名或id名称冲突的bug

在微型项目或单人做项目时，一般不会遇到这个问题。
在多人开发或大型项目中，是多人合作的，就容易遇到这个问题。比如上面的代码中，有元素用过了container类名，后面又用了该类名。在后续测试时就会出现bug 。
解决方法
- 用css起名插件，检测是否已用过该类名。
- 起类名时，不要简单的用title ， container等写法，而是要加上项目或内容的相关元素，如在写头部的container时，可以写作head-container ，在写图片container时，可以写作img-container 。这样基本就解决了冲突bug 。

9，需要登陆时，手机端功能如何排查bug

准备一个能登陆到测试服的id账号
先登陆到web页面，在请求url里把token复制下来
以上的两份资料，即id和token值，找个地方保存起来
在手机端通过接口请求数据且需要userid和token值时，在代码里把这两个值填写上去，写死，就能确保完成登陆后的功能测试。方便排查手机端bug 。
比如，拿到一个可以登陆测试服的账号id是 1000010 ，我web页面拿到的token值是'DIAOHAL30DEDF13DGA'.在请求时，传递参数中就可以这么写：
ajax({..., {userId: 1000010, token: 'DIAOHAL30DEDF13DGA'}}) ... 把参数写成固定值，后台会认为你用这个id完成了登陆。
update 2021-6-22

10，节流阀flag的妙用

如果涉及到0和1变换，true和false的变换，开启和关闭的变换，请求与阻止请求的变换，执行与非执行状态的变化，这种两种状态之间的切换，如果自己的知识一时半会儿的解决不了，请考虑一下flag节流阀。关键时刻，真的有妙用。

/*常见形式*/
var flag = true;
if(flag) {
  // 执行某个语句
}

xxx {
  // 执行完某个语句
  flag = false;
}

11，函数中的点击事件重复触发的问题

举个例子：

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js函数内的点击事件多次触发的问题</title>
</head>
<body>
  <button>点击打印</button>
  <script src="index.js"></script>
</body>
</html>

// index.js
window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  function demoClick() {
    $('button').addEventListener('click', function() {
      log(1);
    })
  }

  function main() {
    demoClick();
  }
  main();
  main();

  // 此时，点击一次按钮， 会输出2次1
  // 因为调用了两次main函数， demoClick函数在main里
  // 同样也被调用两次， 所以这时点击事件也被绑定了两次
  // 只要点击按钮， 就会释放绑定后的log(1)函数体
  // 但是，我们需要的是，不管调用多少次，当我们点击一次按钮时，
  // 只希望绑定一次并输出一次1
})

// 下面来改下js代码
window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var flag = true;

  function demoClick() {
    $('button').addEventListener('click', function() {
      log(1);
    })
  }

  function main() {
    if(flag) {
      demoClick();
      flag = false;
    }
    setTimeout(function() {flag = true;}, 50);
  }
  main();
  main();
  main();
  main();
  main();
  main();

  // 解决思路
  // 对调用demoClick的次数做个限制，
  // 首先flag设定true， 当调用main函数时，会调用一次demoClick函数
  // 这时 会给按钮做一次点击绑定
  // 然后关闭flag ，且在50ms后再打开。 
  // 也就是说这50ms内，重复调用main函数，都不会去调用demoClick函数，更不会绑定事件
  // 这样就达到了重复调用，但是只绑定一次的目的
})

另外需要说一下，一定要尽可能的避免在函数中写js事件，尤其是在回调函数中，能不写事件，就避免写事件。
如果实在不能避免，就一定要处理好多次调用触发多次绑定和输出的问题。

12，单行、多行文字均垂直居中

场景
- 当一块文字不确定是单行还是多行，而且需要垂直居中时，line-height就不能处理了
- 这时候就需要用一个盒子包裹住文字内容，然后用flex属性，实现无论单行还是多行文字的垂直居中。

<div>
  <span>这是一块不知道要单行还是多行的文字内容</span>
</div>

div {
  display: flex;
  align-items: center;
}

还有一种是table解决办法。但是table应用比flex麻烦，这里就不写了。我也提倡用较新的技术。
updata 2021-6-24

13，app页面向左滑动，右侧出现空白

在这里插入图片描述
解决办法：

给body下的大盒子加一个属性即可：overflow: hidden;

14，Typora页面内搜索不能跳转到内容的问题

在这里插入图片描述

解决方法：
- 页面左下角有个</>符号，点一下，切换到源码模式，再ctrl + F就能正常搜索跳转了。

15，关于`left: 50% 和 margin-left: 50%`的bug

解决： https://blog.csdn.net/tuzi007a/article/details/118726410

16，报错 `npm : 无法加载文件 xxx.ps1，因为在此系统上禁止运行脚本。`

安装好ts后，运行ts文件，出现这种报错。
原因是ts脚本被window新系统（10以上）给禁用了。
解决办法：
win + x快捷键，选择Windows PowerShell(管理员)(A)。意思是以管理员身份运行powershell 。
然后输入命令set-executionpolicy remotesigned
最后输入Y，表示解除禁用。就可以了。

17，通过gitee的https克隆项目后，每次push都要输入账号密码的解决

在存放该项目的文件夹中，打开git bash，输入指令git config credential.helper store ，即可解决。

18，webpack5.x对于图片打包出现生成双份图片url及图片打包后不显示的问题

首先，w5已经不支持html-loader了，而是改用了html-withimg-loader。
其次，w5已经打算放弃url-loader , file-loader等，而是改用asset module。如果继续用上述的loader，需要在test匹配的下面一行，增加配置type: 'javascript/auto' .

19，数字转化为字符串问题

var num = 0.00000001;
alert(num.toString().length);

这个结果是4 。
因为num.toString()是1e-8，科学计数法。而不是'0.00000001' 。

20，关于dom.offsetLeft和dom.style.left的值、

// 先给一个绝对定位的dom设置left值为10.11px
// 然后再通过dom.offsetLeft查看，
dom.offsetLeft = 10
// 而不是10.11 。 因为dom.offsetLeft的结果是自动四舍五入取整的。

21， svga在实际应用中，会在div里生成一个canvas标签。不要给这个canvas设置宽高，不然会影响图片的大小和位置，影响布局。除非是特殊需要，不然不要给canvas标签设置宽高。

22，mongodb指令mongo 连接报错：

在这里插入图片描述

原因：mongodb没有存储数据的路径
解决：在该cmd下，输入命令mongod.exe --dbpath F:\MongoDB\data ，意思是让mongodb的数据存储在F:\MongoDB\data 。如果没有data文件夹，就自己建一个。这个cmd不要关闭，然后重新开一个cmd ，输入mongo指令，连接成功。这俩cmd暂时都别关。
参考博客：https://www.cnblogs.com/aizm/p/9984504.html

23，npm install 卡住不动的问题

问题描述：输入指令npm install xxx , 执行一会儿，还没完成，就不继续执行了，也不报错，也没反应，也不结束。
问题解决：换用yarn 。 yarn更稳定，不会出现这种卡住问题。
yarn怎么用：https://www.jianshu.com/p/021df9efdda5

24，去掉axios响应给前端数据中的config, headers, request字段

实际开发中，我们大概率是想从接口获取这样的数据形式：

data: {
	tagCode: '00000000',
	tagMsg: 'success',
	data: {
		username: 'dilireba',
		age: 18,
		sex: 0
	}
}

但是，我们自己写的时候，大概率返回给前端的数据中是这样的：

{
	config: xxx,
	headers: xxx,
	data: xxx,
	request: xxx,
	status: xxx,
	statusText: xxx
}

我们只需要获取到里面的data就可以了，把其他的去掉。

修改Axios安装模块 /node_modules/axios/lib/core/settle.js

'use strict';

var createError = require('./createError');

/**
 * Resolve or reject a Promise based on response status.
 *
 * @param {Function} resolve A function that resolves the promise.
 * @param {Function} reject A function that rejects the promise.
 * @param {object} response The response.
 */
module.exports = function settle(resolve, reject, response) {
  var validateStatus = response.config.validateStatus;
  if (!response.status || !validateStatus || validateStatus(response.status)) {
    // 去掉axios响应给前端数据中的config, headers, request字段
    var xj_response = { // 这里面是返回数据
      data: response.data,
      status: response.status, // 这个是响应码 2xx - 5xx ，也可以注释掉
      statusText: response.statusText // 这个是响应结果文本，比如'OK' , 也可以注释掉
    }
    // resolve(response);
    resolve(xj_response); // 设置成新的返回数据
    // 修改后需要重新npm start重启项目
  } else {
    reject(createError(
      'Request failed with status code ' + response.status,
      response.config,
      null,
      response.request,
      response
    ));
  }
};

25，已经设置了cookie，在控制台也能看到，但是document.cookie获取不到cookie值。

问题说明：
这里明明已经存在cookie，
在这里插入图片描述
但是用document.cookie去获取，发现是空值。

问题解决：
在后端，把cookie的httpOnly字段，设置为false

ctx.cookies.set('userId', _id, {
      maxAge: 1000*60*60*24,
      httpOnly: false
    });

解释：
httpOnly字段，表示是否只是服务器可访问 cookie, 默认是 true 。也就是说，后端设置好cookie后，就默认前端没办法获取的。更改该字段的值后，就表示前端也可以获取。

这样就获取到了：
在这里插入图片描述

26，可视区宽度和页面宽度

页面宽度：document.body.clientWidth
可视区宽度：document.documentElement.clientWidth

27， label和textarea对齐方式

默认的对齐方式是这样的：
实际需要的效果是这样的：
做法：给label加个属性

label {
  vertical-align: top;
}