博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript基础(5) - IDE与调试
阅读量:7050 次
发布时间:2019-06-28

本文共 2212 字,大约阅读时间需要 7 分钟。

IDE

IDE的选择

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

目前 Sublime TextWebStormVisual Studio CodeAtom 这几款IDE使用率最高,个人推荐 :开源免费、使用速度快、插件多、个性化定制、 使用简单

IDE的配置

  • 点击上面的超链接即可下载 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代码了

调试

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

  1. alert

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

    弊端:

    • alert 打印的信息不全
    alert({
    'name': 'hello'}); // alert一个对象时,只能打印出它的类型 [object Object]复制代码
    • alert 会阻塞页面的渲染

    • 调试完后必须清除调试代码,比较麻烦

    • alert 弹框会遮挡页面内容

  2. console

    浏览器内置的console对象功能十分强大,给前端开发调试带来了极大的便利,最多应用于 查看请求后台接口数据

    浏览器 按 F12 / alt + command + i / 鼠标右键 - 检查元素

    • console显示信息的命令
    console.log('hello000');console.info('信息111');console.error('错误222');console.warn('警告333');复制代码
    • console查看对象的信息
    var info = {    boom: "10.24程序猿节日",    message: "不加班"};console.dir(info);复制代码
    • console显示某个节点的内容
    var info = document.getElementById('example');console.dirxml(info);复制代码
    • 计时功能

      console.time()和console.timeEnd(),用来显示代码的运行时间。

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

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

    在浏览器打开需要调试的页面,这里以debug.html为例,js代码里有个方法计算两个数之和:

    • 浏览器 按 F12 / alt + command + i / 鼠标右键 - 检查元素 打开开发者工具,点击 Sources, 左侧栏选中 要调试的页面(或者js文件)

    • 点击行号列”即完成在当前行添加/删除断点操作,刷新页面后代码就会停在断点的位置,需要点击右上角 7 个按钮 才会执行下一步

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

      • Pause/Resume scriptexecution:暂停/恢复脚本执行(程序执行到下一断点停止)

      • Step over next function call:执行到下一步的函数调用(跳到下一行)

      • Step into next function call:进入当前函数。

      • Step out of current function:跳出当前执行函数

      • Step: 下一步

      • Deactive/Active allbreakpoints:关闭/开启所有断点(不会取消)

      • Pause on exceptions:异常情况自动断点设置

    • 执行下一步后就可以一行一行去看程序代码,查看每一行执行完毕之后,各个变量的变化情况

转载地址:http://aepol.baihongyu.com/

你可能感兴趣的文章
handler 机制
查看>>
解决mysql无法导入本地文件的问题
查看>>
HBase 系统架构
查看>>
RichFace标签学习笔记
查看>>
iOS中block介绍(四)揭开神秘面纱(下)
查看>>
更改yum源为阿里云的yum源
查看>>
解决exchang服务器连接不可用问题
查看>>
Tomcat启动权限
查看>>
一步一步學習partitions之hash partitions
查看>>
POJ 1061 青蛙的约会 扩展欧几里得
查看>>
我的友情链接
查看>>
随笔-ftp文件上传,删除
查看>>
Ansible问题汇总
查看>>
linux上部署hadoop集群 基础篇
查看>>
java中堆(heap)和堆栈(stack)
查看>>
H3C 5500/5820 端口聚合LACP
查看>>
我的友情链接
查看>>
Forefront TMG 服务器中如何规划和实现高可用性
查看>>
Exchange Server 2010 故障分享
查看>>
java正则匹配count字符串
查看>>