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。 继续阅读

Visual Studio Code 必备插件,主题及语法提示

Visual Studio Code 是由微软开发的一款免费的,跨平台文本编辑器。由于其出色的性能表现和丰富的功能,它很快成为了开发者的最爱。

与大多数 IDE 一样,VSCode 也有一个扩展市场,包含数千个具有不同功能的插件。为了帮助您挑选值得下载的东西,我们收集了这些最有用和最有趣的扩展。
继续阅读

移动前端不得不了解的HTML5 head 头标签(2016最新版)

html5-head

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

HTML基本的头部标签

下面是HTML基本的头部元素:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--具体可以查看本文 为移动设备添加 viewport 部分-->
    <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
    <title>页面标题</title>
    ...
</head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

继续阅读

2016年度 JavaScript 展望(上) 

在过去的几年间,JavaScript 这种原本用于 Web 浏览器端的脚本语言,越来越多地出现在更广泛的软件应用中。现在,JavaScript 可用作服务器端代码,运行 iOS 与 Android 应用,甚至控制机器人。很难想象还有什么软件生态系统是 JavaScript 没有影响到的。

JavaScript 之所以能在这些新领域长驱直入,很重要的一个原因就是性能。然而,几年以前,在服务器端运行 JavaScript 还是完全不可想像的。在2008年,谷歌开始开发浏览器,并进军 JavaScript 引擎世界,继而触发了一场性能大战,最终极大地提升了该语言的速度。最近的一些努力,诸如 asm.js 只是锦上添花罢了。

本文将会介绍,除了用 JavaScript 框架运行服务器端 JavaScript、创建移动 apps 以及桌面应用之外,未来将何去何从?文中将直接引述许多 JavaScript 解决方案的开发者之观点。让我们首先了解 Node.js 的发展,这或许是 JavaScript 的首个新领域。

Node.js

Node.js 是一款基于谷歌 V8 JavaScript 引擎的开源式运行时环境。尽管许多公司与框架都试图在服务器端运行 JavaScript,Node.js 却是首个大规模成功做到这一点的运行时环境。

从2009年首次推出开始,Node.js 的流行度可谓突飞猛进。使用 Ndoe.js 的公司数不胜数,而此前新近建立的 Node.js 基金会则包括 IBM,Intel,PayPal 以及 Microsoft 等巨头。Node.js 包管理器——npm,更是成为2014年软件世界中规模最大的包管理器,现在其包含的模块数是 Java 与 Ruby 等相似包管理器的两倍左右。

npm 包管理器的增长情况。图片来源:modulecounts.com 继续阅读

用 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上弹出一个新的标签页,即为调试界面;如果很久都没用响应,你懂的。

恢复Chrome打开新的标签页的方法

不知道什么版本开始Chrome的打开新的标签页变成这样了:

1231

在新标签页中加入了硕大的搜索框,并且在输入搜索内容的瞬间,光标居然会跳转到地址栏,好奇葩。原来安装的应用居然到收藏栏了,增加了个应用的按钮,非常不习惯;

恢复Chrome打开新的标签页,可以试试地址栏敲入 about:flags ,打开 about:flags 页面后,搜索 Instant Extended API 能快速定位,只需将下面这个更改为已停用,并重启Chrome浏览器,哇,原来的界面了!

12345

【前端开发工具】google Chrome开发人员工具(Chrome Web Developer Tools)

前几天一个项目中的页面在Chrome和safari下撑开,Firefox,ie,opera正常,静态页面是OK的,只能找Chrome和safari下的调试工具,safari只有在MAC下有调试工具,而Chrome正式版(目前最新3.0.195.38)只有javascript控制台,css和html虽然也能调试,但是非常的不灵活,

继续阅读