Rist

Rist 查看完整档案

厦门编辑闽江学院  |  软件工程 编辑幼之幼教育  |  前端工程师 编辑填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Rist 赞了回答 · 1月17日

解决react中使用innerHTML改如何使用?

使用dangerouslySetInnerHTML属性

<div dangerouslySetInnerHTML={{__html:'<a href="http://https://segmentfault.com/">test url</a>'}}/>

关注 1 回答 1

Rist 回答了问题 · 1月17日

表格上一行编辑的值没保存会带到下一行显示出来,请问这是什么原因

点击编辑时把表单的value做一次初始化清空

关注 2 回答 1

Rist 收藏了文章 · 2019-06-14

实用Javascript调试技巧分享

见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点“偏科”了。下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信。

1. 不要使用alert

首先,alert只能打印出字符串,如果打印的对象不是String,则会调用toString()方法将该对象转成字符串(比如转成[object Object]这种),所以除非你打印String类型的对象,其他什么信息都获取不到。其次,alert会阻塞UI和javascript的执行,必须点击'OK'按钮才能继续,非常低效。所以,喜欢使用alert的同学可以改改这个习惯了。

2. 学会使用console.log

console.log谁都会用,但是很多同学只知道最简单的console.log(x)这样打印一个对象,当你的代码里面console.log多了之后,会很难将某条打印结果和代码对应,所以我们可以给打印信息加上一个标签便于区分:

let x = 1;
console.log('aaaaaaaa', x);

得到:

console.log labeled

标签不一定要有明确的含义,视觉效果显著就可以了,当然有明确意义更好。

事实上,console.log可以接收任意多的参数,最后将这些对象拼接输出,比如:

console.log many params

如果打印信息过多,不容易找到目标信息的话,可以在控制台中进行过滤:

console.log filter

注意点

在使用console.log打印一个引用类型(比如数组和自定义对象)的对象的时候,输出结果可能并不是执行console.log方法那个时间点的值。举个例子:

console.log reference

可以发现两个console.log输出的结果展开后都是[1, 2, 3, 4],因为数组是引用类型,所以在展开后获取到的都是数组最新的状态。我们可以使用JSON.parse(JSON.stringify(...))来解决这个问题:

console.log json

3. 给console.log添加样式

如果我们不想console.log打印结果字体、颜色都一样,我们想要更醒目的显示也可以做到。我们可以使用CSS来给console.log增加样式。比如:

console.important = function (msg) {
  console.log('%c %s', 'color:white; background-color:#FF1744; font-weight:bold; text-transform: uppercase; font-size:18px; padding:4px', msg);
}

console.todo = function (msg) {
  console.log('%c %s %s %s', 'color:black;background-color:#ffde03; font-size:18px; padding:4px', '–', msg, '–');
}

console.important('This is an important message! ');
console.todo('This is something need to be done');

clipboard.png

4. 学会使用console.dir

我们有时候想看看一个DOM对象里面到底有什么属性和方法,但是常规的console.log打印出来的只是HTML标签,就像这样:

console.log DOM

和直接审查元素没有什么区别。

如果我们想看到DOM对象作为JavaScript对象的结构可以使用console.dir,比如:

console.dir DOM

事实上,console.dir可以打印出任何JavaScript对象的属性列表,比如打印一个方法:

console.dir function

5. 学会使用console.table

我们经常会遇到这样的场景:获取到一个用户列表,每个用户有很多属性,但是我们只想查看其中的某些属性,在用console.log打印出来的时候需要把每个用户对象展开一个个查看,非常麻烦。而console.table完美的解决这个问题,比如我只想获取到下列用户的id和坐标:

console.log打印结果:

console.log users

console.table打印结果:

console table users

非常的准确和快速!

6. 学会使用console.time

有时候我们想知道一段代码的性能或者一个异步方法需要运行多久,这时候需要用到定时器,JavaScript提供了现成的console.time方法,例如:

console.time

7. 快速查找DOM元素

有时我们需要查找网页上的某些元素,会选择在浏览器控制台通过document.querySelector/document.querySelectorAll来查询。但是chrome和firefox提供了一种更快的方法,使用类似于jQuery的查询语句:

clipboard.png

$('.item')返回符合条件的第一个元素,$$('.item')返回所有符合条件的元素。

8. 使用debugger打断点

有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去Sources里面找到源码,然后再找到需要打断点的那行代码,比较费时间。使用debugger关键词,我们可以直接在源码中定义断点,方便很多,比如:

debugger

9. 查到源码文件

有时候我们想在控制台的Sources中查找某个js源文件,要把文件夹逐一点开找,非常麻烦。其实Chrome提供了文件的搜索功能,只不过大部分时候我们给忽略了。。

command p

只要按Command + P(windows的快捷键请自行查看)就能弹出搜索框搜索你想要找的文件啦:

command p open

10. 压缩JS文件的阅读

有时候我们需要在Sources中阅读一段js代码,但是发现它被压缩了,Chrome也提供了和方便的格式化工具,让代码变得重新可读:

unminify btn

点完之后变成这样:

unminified

以上就是我个人在平时比较常用的一些调试小技巧,如果大家有其他好的调试技巧也欢迎分享,谢谢🙏!

最后,推荐大家使用Fundebug,一款很好用的BUG监控工具~
查看原文

Rist 赞了回答 · 2018-09-13

ant design 如何动态更换主题色调

antd 提供了theme

关注 6 回答 5

Rist 赞了回答 · 2018-09-13

antd的TabBar怎么设置当前选项的背景色

clipboard.png
可以修改选中图标,换一个你需要的颜色的图标。

关注 2 回答 1

Rist 关注了标签 · 2018-09-13

antd

ant-design ,react 框架

关注 947

Rist 回答了问题 · 2018-09-13

解决ant-design的表格怎么编辑表头行

clipboard.png

onHeaderCell和onHeaderRow用法一致

关注 3 回答 2

Rist 回答了问题 · 2018-09-13

解决ant-design 卡片的标题怎么设置在中间

1.直接添加样式
title={<div style={{textAlign:"center"}}>Card title</div>}

2.通过headStyle设置样式
clipboard.png
headStyle={{textAlign:"center"}}

关注 3 回答 2

Rist 回答了问题 · 2018-09-13

解决antd DatePicker 如何动态的清空日期呢?

Modal 添加destroyOnClose(关闭时销毁 Modal 里的子元素)

在触发弹框的时候添加resetFields();

关注 6 回答 4

Rist 回答了问题 · 2018-09-13

DatePicker 时间选择器组件如何只选择年 antd

clipboard.png

format={'YYYY'}

关注 6 回答 5

认证与成就

  • 获得 3 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-09-20
个人主页被 63 人浏览