web前端工程师常用工具(自用)

一、.exe应用

1.        截图

Snipaste.exe 可以使用f3来实现贴截图功能的截图软件，参考部分代码、页面样式、原型图标注时常用

2.        查看.sketch文件

Lunacy.exe

3.        看图

ImageGlass，有中文，不能改图片大小

qimgv，没有中文 ，可以改图片大小（目前自己对比两个软件的使用，只遇到过能否改图片文件

大小的这个差异）

4.        markdown

Typora.exe

 Joplin （多了markdown文件树管理）

5.        git

 Sourcetree

6.        阅读.epub

NeatReader

7.        管理hosts

SwitchHosts.exe

8.        手机模拟器

唯一一个自带市场可以装x86版uc浏览器的，虽然不是最新，但是已知最新（做兼容uc手机端浏览器时用到）

下载的时候发现自带谷歌框架

9.        调接口 

 Postman

10.       编辑器

 1. Visual Studio Code

2.cursor

可以输入中文提示一段代码，接近chat的平替？如果用这个打开项目，还可以对其中的一些方法进行解读分析

11.         通用防弹窗

火绒(克制金山系) 

12.         果核cookies对比工具

果核cookies对比工具_精易论坛

下载链接从上述地址中找。（一般是希望用不上的）

13. 连接服务器

 WinScp可以平替xftp，

而xshell的上替用MobaXterm。截图中的这两两款都可以免费试用

二、谷歌浏览器插件

1.        Tampermonkey油猴，在网页上执行js脚本

2022.12.08 补充，类似油猴的还有个叫暴力猴

2.        Adblock Plus广告拦截

3.Wappalyzer 获取部分当前页面使用的技术栈

 

 4.二箱，搜图（需科学上网）

5.rt如图，书签侧边栏

 6.彩云小译，体验较好（英文和中文不影响，有时候有bug），免费次数有限;

用完次数就换mate translate或者谷歌浏览器自带的了

 

 7.其他的，像React Developer Tools、

Redux DevTools、Vue.js devtools这些就不提了。后续有用到新的再继续补充

三、搜索引擎

注：更新于2021-10-12，仅保证这会儿下面的几个还能用

1.搜达，一般被我拿来用必应了

搜达——一搜即达

2.开发者搜索

开发者搜索-Beta-让技术搜索更简单高效

 3.极简搜索

一答搜索-极速极简,聚合全网搜索引擎,资源自由搜

四、工具网页

 1.在线运行js

小闪电 - JSRUN可以用手机写代码的JS在线编辑器网站

2.在线运行react等项目工程

​​​​​​CodeSandbox: Online Code Editor and IDE for Rapid Web Development

The online code editor for web apps. Powered by Visual Studio Code. - StackBlitz

3.免费图床

路过图床 - 免费图片上传, 专业图片外链, 免费公共图床

4.正则

正则表达式30分钟入门教程

regex101: build, test, and debug regex    正则运行、解析，默认php手动调英文+js

5.技术站

--（1） MDN

JavaScript 参考 - JavaScript | MDN

-- （2）阮一峰的相关著作以及博客

ES6 入门教程

-- （3）张鑫旭的相关博客

CSS gap属性进化史 « 张鑫旭-鑫空间-鑫生活

6.git速查

Git Command Cheat Sheet & Quick Reference

https://github.com/arslanbilal/git-cheat-sheet

git 速查表

常用 Git 命令参考表 - quanxin.org

五、webStorm插件

20240204补充（新公司因为需要，转到了webStorm）：

注：使用下面的代码补全的时候，因为优先级问题，可以选择禁用jsx、tsx里的emmet，目前tab键应用代码的优先级会优先emmet。webstorm这边可以调成vs code的按键映射，不想学新快捷键的可以直接调这个。

1.aiXcoder Code Completer

描述：ai代码补全

2.Codeium

描述：ai代码补全（+一些额外的功能，比如Codeium chat）

3.rainbow-brackets

描述：同色括号的功能，vs code那边已经自带了。

4.CodeGlance Pro

描述：应该是右侧代码导航，替换了滚动条，也是vs code自带了的功能。