Visual Studio Code 最好的功能、插件和设置

Visual Studio Code 是由 Microsoft(微软) 发布的一个免费的,开源的跨平台文本编辑器。他们基于在线编辑 Visual Studio Online (代号为 “Monaco”),并结合 GitHub 的 Electron 实现的一个跨平台编辑器。他们在为程序员创建一个快速且高效工作环境方面取得巨大进步。

  • 提供智能补全功能的智能感知
  • 编辑器内置代码 调试工具
  • 侧边栏内置 Git 命令
  • 处理多实例能力的 集成终端
  • 通过扩展和主题定制能力
  • 下载 VS Code Insiders,可以获取 每天构建的最新版本

继续阅读

使用 Chrome DevTools 调试 JavaScript

彻底地摒弃 console.log 调试!了解如何在Chrome开发者工具中使用断点来调试代码。

作为一名新开发人员,查找和修复 bug 可能非常困难。 你可能会随机使用 console.log(),试图查看代码的工作工作情况。 那么我现在告诉你,你不需要这么麻烦。

这篇文章是关于调试的正确方法!你将学习如何使用 Chrome 开发人员工具来设置断点,并逐步调试代码。这个工作流通常是在查找和修复代码中的 bug 时更有效的方法。

本教程将向你展示如何调试一个特定问题,但你所学习的一般工作流程有助于调试所有类型的 JavaScript bug。 继续阅读

为什么我放弃 Gulp 和 Grunt 而使用 npm Scripts

我知道你在想什么。 什么?!Gulp不是刚刚干掉了Grunt吗? 为什么我们不能在Javascript的地盘上消停一会儿呢?我知道,但是…

我发现Gulp和Grunt是没有必要的抽象,npm Script 已经足够强大,并且通常更好用。 继续阅读

用 Chrome 调试 Android 下的页面

用 Chrome 调试 Android 下的页面虽然有点不符合国情,但是还是能解决一些问题的,所以记录一下。

首页在Android(4.0以上)设备上安装Chrome浏览器(版本>=32);

开启当前Android设备的USB调试;

在PC或MAC上安装chrome浏览器(版本>=32)和对应的Android设备驱动(如果找不到,可以在这个 列表 内尝试)

用USB线连接Android设备,在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车,或通过菜单图标→工具→检查设备,进入调试界面;如图:

DD8E06F3-D4A2-4FAD-A756-8D1652A8611C

勾选界面中的 Discover USB devices ,直到搜索到你的Android设备。

在移动设备上弹出的是否允许远程调试上,选择“允许”

在下面的页面列表(将展示已在Android上的chrome中打开的页面),点击对应的 inspect 开始调试

此时将在桌面版Chrome上弹出一个新的标签页,即为调试界面;如果很久都没用响应,你懂的。

使用console.table()调试javascript

或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于:

  1. 主要用来输出对象和数组;
  2. 更加直接的可视化,以表格形式展现;
  3. 可以单独输出某个或某几个属性;

详情点击: http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

前端调试利器DebugBar

前端调试工具有很多,比如FireFox firebug, FireFox Web Developer, DOM Inspector,遨游的PageView,IE WebDeveloper V2,还有IE8自带的开发工具 等等,这里我再推荐一个DebugBar;

大家肯定都知道ieTester(点击查看ieTester相关信息),大家都用ieTester来测试各个IE版本的页面兼容性,其实新版的ieTester(点击下载目前最新版的ieTester v0.3.2 )还有一个很强大的页面调试插件:DebugBar。下面来介绍一下功能:

1.DOM:

DebugBar可以分析出所有的DOM,包括图片,样式,脚本等等,

2009-03-27_130604

我们可以通过拖动目标工具(2009-03-27_140246)到页面中寻找需要的目标元素,如图

继续阅读