javascript 工具类 javascript ide工具

转载

架构师之光 2023-07-23 08:39:24

IDE

俗话说：工欲善其事必先利其器，一个好用的编辑器直接影响编写JavaScript的效率。

目前 Sublime Text、WebStorm、Visual Studio Code、Atom 这几款IDE使用率最高，个人推荐 Visual Studio Code：开源免费、使用速度快、插件多、个性化定制、使用简单

点击上面的超链接即可下载 Visual Studio Code, 安装完后打开该软件进入主界面：
点击红色框内的 ‘打开文件夹’ 可以选择一个任意的文件夹作为开发目录，上图中选择了 ‘DEMO’ 文件夹作为开发目录
点击红色框内的 ‘新建文件’ 后，按住快捷键 ‘command + s 后出现如下的弹窗，输入 文件名 + 后缀，点击 ‘存储’ 后文件就新建成功
Visual Studio Code 的商店里面有许多的插件，安装插件可以极大加快编码速度，实用的插件有：Auto Close Tag、Auto Rename Tag、Beautify、HTML CSS Support、HTML Snippets（在html文件首行输入 ! + tab 可快速生成 html片段）、js-patterns-snippets、open in browser（alt + b 可在浏览器中打开html文件）
安装完上面几个插件后，可以新建一个 index.html文件, 在首行输入 ‘!’ ,然后按 ‘tab’ 键，自动生成 html模板
html模板生成后，可以写样式、 HTML标签、js代码了

比较常用的调试方法如下：

alert
当你的程序运行不出来时，可以在你认为可能出错的地方加上一句alert("没有错误！");如果再次运行程序是可以弹出这句话，那么说明这句以上的程序代码没有出现错误，再把alert("没有错误！");这句代码下移，直到不弹出“没有错误”这句话位置，那么错误就出现在最后一次alert("没有错误！")与上一次alert("没有错误！")之间。
弊端：

alert({'name': 'hello'}); // alert一个对象时，只能打印出它的类型 [object Object]
复制代码

console
浏览器内置的console对象功能十分强大，给前端开发调试带来了极大的便利，最多应用于查看请求后台接口数据
浏览器按 F12 / alt + command + i / 鼠标右键 - 检查元素

console.log('hello000');
console.info('信息111');
console.error('错误222');
console.warn('警告333');
复制代码

var info = {
    boom: "10.24程序猿节日",
    message: "不加班"
};
console.dir(info);
复制代码

var info = document.getElementById('example');
console.dirxml(info);
复制代码

console.time("控制台计时器一");  
for (var i = 0; i < 1000; i++) {    
    for (var j = 0; j < 1000; j++) {}  
}  
console.timeEnd("控制台计时器一");
复制代码

断点，调试器的功能之一，可以让程序中断在需要的地方，从而方便其分析。也可以在一次调试中设置断点，下一次只需让程序自动运行到设置断点位置，便可在上次设置断点的位置中断下来，极大的方便了操作，同时节省了时间

浏览器按 F12 / alt + command + i / 鼠标右键 - 检查元素打开开发者工具，点击 Sources, 左侧栏选中要调试的页面（或者js文件）
点击行号列”即完成在当前行添加/删除断点操作，刷新页面后代码就会停在断点的位置，需要点击右上角 7 个按钮才会执行下一步

从左到右，各个图标表示的功能分别为：