提升前端开发效率及查错能力的小技巧(代码片段)

关键词：

前言

　　作为一个快五年开发经验的前端工程师，在工作中感到最痛苦的除了无止境的改需求之外，就是调试bug阶段了，有时候开发一个网站也就两个星期左右，但调试起bug来一调就是几个小时！浪费时间不说，效率又低，作为程序员如果自己不懂得心疼自己（摸摸头顶...），那么没人会心疼你。

一、各种console

　　下面的众多console输出中，如果不想都记，就记住关键的五个：console.log(); console.warn(); console.error(); console.time(); console.timeEnd();

// 判断第一个参数是否为真，false 的话抛出异常并且在控制台输出相应信息。
Console.assert();

// 清空控制台，并输出 Console was cleared。
Console.clear();

// 以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
Console.count();

// 重置指定标签的计数器值。
Console.countReset();

// 在控制台打印一条 "debug" 级别的消息。
Console.debug();

// 显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。.
Console.dir();

// 打印 XML/HTML 元素表示的指定对象，否则显示 JavaScript 对象视图。
Console.dirxml();

// 打印一条错误信息，使用方法可以参考 string substitution。
Console.error();

// 创建一个新的内联 group, 后续所有打印内容将会以子层级的形式展示。调用 groupEnd()来闭合组。
Console.group();

// 创建一个新的内联 group。使用方法和 group() 相同，不同的是，groupCollapsed() 方法打印出来的内容默认是折叠的。调用groupEnd()来闭合组。
Console.groupCollapsed();

// 闭合当前内联 group。
Console.groupEnd();

// 打印资讯类说明信息，使用方法可以参考 string substitution。
Console.info();

// 打印内容的通用方法，使用方法可以参考 string substitution。
Console.log();

// Starts the browser‘s built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
Console.profile();

// Stops the profiler. You can see the resulting profile in the browser‘s performance tool (for example, the Firefox performance tool).
Console.profileEnd();

// 将列表型的数据打印成表格。
Console.table();

// 启动一个以入参作为特定名称的计时器，在显示页面中可同时运行的计时器上限为10,000.
Console.time();

// 结束特定的 计时器 并以豪秒打印其从开始到结束所用的时间。
Console.timeEnd();

// 打印特定 计时器 所运行的时间。
Console.timeLog();

// 添加一个标记到浏览器的 Timeline 或 Waterfall 工具。
Console.timeStamp() ;

// 输出一个 stack trace。
Console.trace();

// 打印一个警告信息，可以使用 string substitution 和额外的参数。
Console.warn();

二、debug

　　会java的小伙伴们见到这个单词应该非常亲切，因为比起System.out.println();这么low的调试，善用debug才是王道；现在就介绍js中的：debugger;

function test() 
  console.log("debugger之前");
  debugger;
  console.log("debugger之后");

　　注意：这个只有在浏览器中运行时才生效，程序运行到debugger就不会再执行下去，也就是浏览器会一直转圈圈，但控制台依旧能打印debugger之前的所有信息；

三、TODO

　　同样是令java小伙伴们亲切的单词，起到标签记录位置的作用

　　注意：1.这个是在我们某个逻辑还未写完，但是又不得不去更改别的地方或优先处理别的问题时使用；2.这个一般情况写在注释上，不会对程序造成影响，且能快速定位;

　　准备工具：下载两个插件（TODO Highlight, Todo Tree）

　　TODO Highlight是为了让TODO:这个字样为高亮提醒，就算放在注释内字体颜色也是高亮的，非常显眼；

　　Todo Tree是为了起到类似超链接一样的效果，不管你的项目多大，被标记的地方都被统一管理，可以直接跳转；

四、VScode常用快捷键&&快捷操作

　　Ctrl+回车，直接跳到下一行;

　　Ctrl+Shift+回车，直接在上一行; 

　　选中字符，按Ctrl+k,直接全局选中并加光标; 

　　shift+alt+↓是快速复制当前行到下一行; 

　　按住滚轮一直往下，那么下面的段落都会多一个鼠标闪烁,可以统一进行多行操作;

　　Shift + Alt + F,实现当前页代码的对齐;

　　输入单词Lorem之后按Tab键，会(随机)生成很多文字信息--乱输假文，如果Lorem100,后面写的数字就是指定出现的单词个数;

　　h$*6$级标题--$为自增符，表示创建h1~h6的标题,里面的表示元素内容;

　　((h2[id="chapter$"]>章节$)+p>lorem1000)*6--可以设置里面的id;

　　ul*5>(li>h3>a>lorem5)+(li*6>a>lorem2)--让第一个li里面嵌套h3属性;

五、在线API

　　这个其实我有点不想发出来，因为本身这个是有人好心搭建服务器并提供假数据给大家方便调试，但有些人不知道报着什么目的恶意循环调用这些API导致对方服务器奔溃多次，希望大家使用这些接口的时候能报着感恩的心态去使用，不要恶意攻击；

　　http://jsonplaceholder.typicode.com  ( /users  /todos /comments /ablums /photos /posts)  这个网址是为提供一些假的在线API，举例子，就是后端接口没做好，我们拿来用，总共6个接口。

总结

　　以上就是我常用的开发小技巧，不常用的并没有发出来，如果小伙伴们有更好的方法也欢迎在评论区留言，大家一起学习进步！

提升python代码性能的六个技巧(代码片段)

...🗿hello大家好啊，我是作家桑。本文为大家介绍提升Python代码性能的六个技巧，希望大家看完有所收获。为什么要写本文？首先讨厌Python的人呢，总是会吐槽Python的性能速度慢。但是事实上程序运行速度的快... 查看详情

优雅简洁5个快速提升python代码能力的小技巧(代码片段)

在Python中有许多编码小技巧。有时，了解其中的一些技巧可以帮助我们减少编写的代码量，同时让我们的程序看起来更加优雅简洁。在本文中，我将介绍我在日常工作中经常使用的5个编码小技巧！喜欢记得收藏、... 查看详情

吐血推荐17个提升开发效率的“轮子”(代码片段)

...轮子用户，再配合一下idea的快捷键，可以极大得提升我们的开发效率。今天我决定把一些压箱底的小工具，分享给大家，希望对你有所帮助。本文会分享17个我们日常工作中一定会用得到的 查看详情

java中的5个代码性能提升技巧，最高提升近10倍(代码片段)

文章持续更新，可以关注公众号程序猿阿朗或访问未读代码博客。本文Github.com/niumoo/JavaNotes已经收录,欢迎Star。这篇文章介绍几个Java开发中可以进行性能优化的小技巧，虽然大多数情况下极致优化代码是没有必要的，... 查看详情

xshell提升效率的小技巧告诉你

...   确定后，就可以试试了。快速复制、黏贴，提升工作效率。    另外，对于没有鼠标的情况。可以通过如下方式编辑键盘快捷键，达到目的。 3、快速查找输 查看详情

理解cpu分支预测，提高代码效率(代码片段)

...加速业务的上线速率，也会体现在优秀程序员在工作效率提升、产品性能优化和用户体验改善等小技巧方面的分享，以提高我们的工作能力。技术传播的价值，不仅仅体现在通过商业化产品和开源项目来缩短我们构建应用的路径... 查看详情

oracle小技巧手把手教你玩转sql*plus命令行，工作效率提升200%(代码片段)

作者简介作者：LuciferLiu，中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作，曾从事Oracle数据库开发工作，主要服务于生产制造，汽车金融等行业。现拥有OracleOCP，OceanBaseOBCA认证，擅长Oracle数据库运维... 查看详情

oracle小技巧手把手教你玩转sql*plus命令行，工作效率提升200%(代码片段)

作者简介作者：LuciferLiu，中国DBA联盟(ACDU)成员。目前主要从事OracleDBA工作，曾从事Oracle数据库开发工作，主要服务于生产制造，汽车金融等行业。现拥有OracleOCP，OceanBaseOBCA认证，擅长Oracle数据库运维... 查看详情

11个提高css技巧的小知识，你知道吗？

前端开发越来越侧重于效率和性能，使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利。但是也有很多简单的方法可以编写小巧快速的CSS代码，提高开发效率并解决许多常见的问题。1.使用CSSreset像normalize.css... 查看详情

五个goland进行go开发的小技巧(代码片段)

五个goland进行go开发的小技巧本文译自5TipsToSpeedUpGolangDevelopmentWithIntelliJOrGoland确实很实用.1.实现interface比如我想为下面的结构体实现共识interfacetypeMyConensusstruct通过右键generate->implementmethods->搜索engine一键生成下面代码:typeMyC 查看详情

emmet工具使用和技巧(代码片段)

介绍在前端开发的过程中，一大部分的工作是写HTML、CSS代码。特别是手动编写HTML代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了Emmet(前身是ZenCoding)，它可以极大的提高... 查看详情

又来一个idea实用小技巧，工作效率提升不少(代码片段)

👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇来源：陈皮的JavaLibhttps://blog.csdn.net/chenlixiao007当你在使用IDEA编写项目代码的时候，是否遇到过如下一些情况？1.与别人沟通，需要简写... 查看详情

8个python加速运行的小技巧(代码片段)

...种脚本语言，相比C/C++这样的编译语言，在效率和性能方面存在一些不足。但是，有很多时候，Python的效率并没有想象中的那么夸张。本文对一些Python代码加速运行的技巧进行整理。0.代码优化原则本文会介... 查看详情

8个python加速运行的小技巧(代码片段)

...种脚本语言，相比C/C++这样的编译语言，在效率和性能方面存在一些不足。但是，有很多时候，Python的效率并没有想象中的那么夸张。本文对一些Python代码加速运行的技巧进行整理。0.代码优化原则本文会介... 查看详情

git常用的分支技巧(代码片段)

...一个强大功能，在平时开发如果能够善加使用，定能成倍提升开发效率。1.分支开发模式主分支master上一般是稳定版本，需要保证随时都能发布。所以，可以建立一个开发分支用于开发新功能。gitbranchdev查看有哪些分支gitbranch-a*d... 查看详情

受用一生的高效pycharm使用技巧(代码片段)

...一些高效的使用技巧，肯定会给我们的开发效率带来质的提升。今天我就来写一写我在平时开发中一直在用的，可以明显改善开发效率的使用技巧，一旦学会，受用一生。01.代码排版，自动PEP8pep8是Python语言的一个代码编写规范... 查看详情

接私活福音，validation组件敏捷开发，效率提升5倍！(代码片段)

本文摘要·对于10,000元以下的外包项目，有很多表单需要提交，一般我们需要在form表单、js代码、后端代码中重复写3遍元素name值，而且在前端页面无法对输入进行验证与拦截，这样接活赚钱的效率太低了（哈... 查看详情

android开发常用控件的小技巧(代码片段)

...巧分享一下。EditText布局文件中设置inputType无效处理办法开发中我们有时候会限制输入的内容，比如只能输入数字，但是布局文件中设置inputType有时候就是不起作用。此时我们可以在代码中这样设置：只能输入数字或... 查看详情