前端工程师都有用哪些比较靠谱的小工具

作为曾经的web前端工程师，来答一发。

jsonView Chrome插件

这是一个Chrome浏览器的json视图的插件。这个插件非常强大的，不仅可以把你在浏览器输出的json数据格式化，也可以将浏览器的xml格式的文件格式化，非常非常的方便，尤其是前端同学在查看api数据的时候，无需再去各种json格式化网站逐个匹配了~~~~强烈推荐！！

WebStorm IDE开发工具

这是款前端开发的ide。基本上前端开发中你能想到的，他都可以帮你实现了，语法高亮，代码补全提示，terminal终端连接，mysql *** 作功能，集成一体，甚至php都可以写，异常的强大，非常重的一个前端开发工具，推荐。

Hbuilder 一个可以云打包html5app的开发工具

Hbuilder是一个国内互联网公司DClound开发的ide，这款ide非常的强大，专门为了Html5所打造的一款ide，如果你不想做原声的Android和iOS APP，那么你可以通过在Hbuilder上开发webapp，之后通过Hbuilder的云打包打包成自己的apk或者ipa的文件，一秒钟可以打包你的安卓或者iOS APP。如果你不想云打包的话，你可以本地打包，可以下各种插件，是一款非常强大的免费前端H5的ide，强烈推荐！

SessionBox 可以随意切换你的Session的Chrome插件

sessionBox是一块可以让你随意切换你的session的Chrome插件~ 用户还可以给不同的session设置各种颜色，方便地标识session；SessionBox只对那些把网页的状态保存到session中的才有效果。顺便提供一下SessionBox的官网：>

目前介绍了以上四款工具，建议题主可以尝试一下，都是非常不错的工具，虽然我现在不在是前端，但是对于除了webstorm之外的三款工具我都是经常会使用的；至于我为什么不使用webstorm是有原因的，因为我现在已经是作为一枚后端RD的存在，目前在公司开发机上只能用vim开发~~

首先，需要确认您遇到的是哪种打包验证问题。一般情况下，`hbuildera` 出现打包验证会有以下两种情况：

1 应用内打包验证： 在 `manifestjson` 中设置了 `apppatch` 属性，应用在打包前需要进行验证。这是华为官方为了提高应用安全性推出的一种机制。如果您遇到了应用内打包验证，需要按照以下步骤进行处理：

- 在华为开发者联盟控制台中创建应用签名。获取签名步骤请参考华为开发者联盟官方文档。

- 在 `manifestjson` 中设置 `signature` 和 `signatureAlgorithm` 属性。`signature` 属性值为步骤一获取的应用签名，`signatureAlgorithm` 应设置为 `SHA256withRSA`。

- 在 `manifestjson` 中设置 `origin` 属性。`origin` 属性值为您的应用的图标 URL，该 URL 应为 >

HBuilder常用的快捷键：

Alt + [ 匹配括号

Alt + ↓跳转到下一个可编辑区

Ctrl + Alt + j 合并下一行

Ctrl + Alt + ←选择助手

Ctrl + 回车 换行

Ctrl + Shift + 回车 向上换行

Ctrl + d 删除一行

Ctrl + Shift +R 复制上一行

创建HTML结构： h 8 （敲h激活代码块列表，按8选择第8个项目，即HTML代码块，或者敲h t Enter）

中途换行： 'Ctrl+Enter'

设置charset： m e 6 Enter

引用外部js： s 2 Enter 'Ctrl+Enter'

创建js区块： s Enter

创建函数： f u n 3 （或者 f u n n Enter）

为函数命名：W h o i s E

跳转到函数末尾： End 'Alt+[' ↓ 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思）

创建style节点： s t Enter ↓ 'Ctrl+Enter'

引用外部css： l Enter Enter

跳转到下一个可编辑区： 'Alt+↓'

创建img标签： i m Enter Enter 'Ctrl+Enter'

插入换行符： 'Shift+Enter' Enter

创建div并设id和class： d i Enter d 1 → Space c Enter Enter （这里提示的class列表是在testcss里定义的）

转到class的定义处：'Ctrl+Alt+D' （按Alt点击鼠标也可以）

关闭标签页：'Ctrl+w' （切换标签页则可以用Ctrl+e）

添加自定义属性data-test并赋值1： → Space d 7 t e s t Tab 1

合并下行：'Ctrl+Alt+j' 'Ctrl+Enter'

创建超链接并设id： a Enter Enter → Space i Enter a 1

使用选择助手选中#d1：'Ctrl+Alt+←' 'Ctrl+Alt+←' 'Ctrl+Alt+←' (如果快捷键冲突,可使用Alt+S U，或者鼠标双击引号)

重新修改链接指向新创建的a1： BackSpace 'Alt+/' Enter 'Ctrl+Enter'

创建ul： u Enter

折叠代码：'Ctrl+Alt+-'

向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义）

没有代码块时，使用emmet语法创建标签：n a v Tab （如果不知道emmet技术，请搜索学习，前端必学）

使用shift转码输入空格：'Shift+Space' （如果与输入法快捷键冲突，也可输入& n 2）

创建按钮：'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e →

添加点击事件： Space o n c k Enter w h o Enter → （onck是模糊匹配，不用输入完整单词也会模糊匹配，除代码块外所有语法提示都支持模糊匹配）

使用转到定义到js函数：'Ctrl+Alt+D' ↓

------以下为js部分

定义一个变量e： v a r Space e ; Enter

为e赋值：e Space = Space d o Enter g 6 " Enter （可提示样式列表）

使用回车或Tab跳转光标到绿色竖线（若没有绿色竖线请使用End到行尾）：Enter ; Enter

为e赋值2：e Space = Space d o Enter g 8 " d 8 Enter ; Enter （可提示标签列表）

为e赋值3(这个代码块很常用)：e Space = Space $ (或者dg) Enter 2 Enter ; Enter （可提示id列表，注意选择d1）

为e设置algin属性： e s e 2 " a l Enter → , " c Enter Enter ; Enter

设置自定义属性：e s e 2 " d Enter → , " 2 Enter ; Enter

提示字体列表： e s t Enter f o 2 = " Enter Enter ; Enter

提示列表： e s t Enter b 7 = " h b Enter Enter ; Enter

还能这么写css： e s t Enter c s 2 = " b 7 h b Enter → ; Enter

写switch对e判断：s w 2 e s t Enter d i s Enter Tab

case处提示display的值域：" - w e Enter

跳转到switch结尾（有绿色竖线）：Enter Enter

写if代码块：i f f Enter (或者使用i f 2)

为if添加条件判断属性里的样式：e g e t a t Enter " c Enter Enter ! = " Enter ↓

设置e的样式：e c l 2 (此处也可以用c l n Enter) = " Enter Enter ; ↓ Enter

js里可以提示html： e i n n Enter = " < f o Enter Space c o Enter Enter Enter ; Enter

e赋值改为超链接：e Space = Space $ Enter Enter Enter ; Enter

给a1加链接地址：e h r Enter = " Enter Enter ; Enter

给a1加target：e t 5 = " Enter Enter ; Enter

e赋值改为image对象：e Space = Space n e w Space i m 6 Enter ; Enter

为img增加： e s r Enter = " Enter Enter ; Enter

e赋值改为indexedDB对象：e Space = Space w i Enter i Enter Space | | Space w i Enter i n d e x e d 5 Space | | Space w i Enter i n d e x e d 3 Space | | Space w i Enter i n d e x e d 2 ; Enter

确认e可被浏览器识别：i f f Enter (也可以使用i f 2) t y 4 e Enter ↓

执行indexdb的方法：e o p Enter " t e s t Enter ; ↓ Enter

------以下为删除又添加上外部css引用

定义head变量：v a r Space h e a d Space = Space d o Enter g 8 " h e Enter Enter [ 0 → ; Enter

with里也可以提示： w i t h h (或者w i t 2) Enter h Enter ↓

获取head的最后一个子节点：v a r Space l Space = Space l e c Enter ; Enter （with里的head可直接识别子对象）

去掉该子节点：r e m 6 l → ; ↓ Enter （head的lastElementChild就是外部引用的css）

动态生成一个css文件引用：e Space = Space d c Enter l 5 Enter ; Enter

添加属性：e r 3 = " s t y Enter Enter ; Enter

设置type： e t y Enter = " c Enter Enter ; Enter

设置href：e h r Enter = " c Enter Enter ; Enter

将e加入head中：h Enter a p Enter e Enter Enter ; Enter

------演示重构，即重命名变量

用代码块定义一个变量s：v a r s Enter Tab e Space i s Space 'Ctrl+Enter'

判断e的属性：i f e（或i f 3） Enter e g 2 " d Enter Enter = = n u 2 ↓

为s赋值：s = s + e o u Enter ; 'Alt+↓'

为s赋值：s = s + " u n k n o w → ; ↓ Enter

将s打印出来：a l Enter s

选择s并转到定义：'Shift+←' 'Ctrl+Alt+D'（按Alt点击鼠标也可以）

重构s的命名为ss：'Ctrl+F2' Enter s s Enter Enter (d出对话框可预览重构结果)

跳转到函数末尾：'Alt+↓' 'Alt+↓' Enter

添加一个启动事件： a d Enter " d o m l o Enter → , f u n a Enter (此处也可以是f u 6) ↓

提示自定义函数的jsdoc： f i n i Enter 1

------css部分

跳转到CSS：'Alt+↓'

给body加样式：b o Enter { Enter

emmet方式增加textalign：t c Tab Enter

模糊匹配增加user-select：u s e r s 4 5

写下一个样式：↓ Enter

为input增加样式：i n Enter [ t y Enter = Enter → { Enter

使用代码块设置宽度：w 9 9 0 ↓ Enter

为ul加样式：u l { d n Enter 'Ctrl+Enter'

ID也可以提示：# 2 { Enter

提示字体列表：f f Enter Enter Enter

回车自动补行尾分号：Enter

增加background-image：b i Enter h b Enter

大功告成，保存并运行起来看看：'Ctrl+s' 'Ctrl+r'

如果你屏幕够宽，也可以点击右上角视图切换，换到边改边看视图Ctrl+P，左边保存右边自动刷新。

1、首先在电脑中点击打开HBuilder工具后，点击项目资源管理图标按钮，如下图所示。

2、这时看到，一般默认是设置为HBuilder风格的样式，如下图所示。

3、此时可以将图标设置为无图标状态，还能将其更改为Seti或者其他样式。

4、更改后，可以看到Seti的样式，可以根据自己的需求，来设置该主题风格，如下图所示就完成了。

工具HBuilder 安装包；

Android模拟器或者数据线+真机</ol>方法运行HBuilder---HBuilder，安装包，解压，运行HBuilderexe。注册，并登陆；

新建app---在左边右键，选择新建；

在d出的窗口，填入应用名称，根据需求选择项目位置，以及模板内容；

创建好之后，选择刚刚创建好的项目，在顶部选择运行，根据你的情况现在运行方式；

选择要打包的项目，在顶部选择运行，发型原生安装包；

在d出的窗口，选择相应证书，如果参数配置未完成，点击顶部参数配置；

上传图标，如果不想挨个穿图标就点击下方生成并替换；</ol>参数配置配置相应的app入口位置，app名称，版本配置图标；

配置启动；

sdk配置；（可选,如果需要同步登录，需配置相应的参数，获得相应的参数需到相应的开放申请）</ol>

hbuilder配置不了微信小程序云函数解决方式如下：

1、在配置文件里加入以下代码cloudfunctionRoot，cloud_functions。

2、右键新建nodejs文件，写入自己的代码。

3、打开cmd以管理员身份进入到自己新建的nodejs文件下。

4、输入一下代码npminstallsavewxserversdk。

5、添加完毕就可以上传云函数了。如果调试没问题的话。

以上就是关于前端工程师都有用哪些比较靠谱的小工具全部的内容，包括:前端工程师都有用哪些比较靠谱的小工具、hbuildera出现打包验证怎么处理、hbuilder的快捷键有哪些等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！