开发者工具

最近对Chrome开发者工具十分关注，因此学习了不少相关文章。这里是HTML5ROCKS上的文章 Introduction to Chrome Developer Tools 的阅读笔记。注：下面的内容不是一对一地翻译，而是摘录和个人学习体会的结合。 1. 简介 （1）Chrome开发者工具虽然名为“Chrome”，但其实它不仅用于Chrome，也可以用于Safari。这个开发者工具是开源项目Webkit的一部分。 （2）Chrome开发者工具（作者这里以Chrome 5为例）目前包括8类功能，分别是： 元素（Elements）：该工具帮助我们查看原始的HTML、CSS和DOM，并且可以实时修改它们。 资源（Resources）：该工具可以让我们了解网页从服务器请求了哪些组件，由此花费的时间和占用的带宽，而且可以查看每条资源的HTTP request和HTTP response的头部。如果我们希望加快页面加载的速度，我们可以通过分析这一工具中提供的信息来考虑解决方案。 脚本（Scripts）：该工具中我们可以看到网页所调用的js文件的列表，还为我们提供了多功能的js调试器。 时间轴（Timeline）：该工具可以让我们对加载时间和速度有更进一步的分析，我们可以详细深入了解浏览器花费多少时间来处理DOM事件、渲染页面布局以及绘制窗口。 概述（Profiles）

TODO：小程序开发环境搭建 1.第一步当然是要先注册小程序了 2.登录到小程序 a)完善小程序信息，如名称，图标，描述 3.绑定开发者 4.获取AppID，并设置服务器信息 5.下载并安装开发者工具 a)使用管理员或者绑定到开发者微信号扫描登录，选择本地小程序项目 b)创建或打开项目，需要填写AppID、项目名称和本地开发目录。开发者工具左边是模拟器可模拟不同尺寸的手机，目前只可模拟iPhone和Android的机型，网络可模拟wifi，2g，3g，4g；右侧是调试工具，可编码，可调试，如果要选择界面上的元素需要切换到“Wxml”；如果觉得编码不方便，也可选择自己习惯的编辑器编辑代码，然后在开发者工具上预览。 6.小程序是一种寄宿在微信上的前端框架（小编的理解），数据还是由服务器专门来处理，而且服务器域名需要经过ICP备案，走的协议是https，wss的加密协议。 7.https,wss的加密协议，各大云服务器平台都有自带免费CA证书服务，可自行申请，也可花钱购买 8.到此简单的微信小程序开发环境即可搭建完成，从前端到后端贯穿成功。小程序，小目标，越来越好，早日可以发布。 wxgzh:ludong86 来源： oschina 链接： https://my.oschina.net/u/2964302/blog/786895

目录 开发者工具 console对象 console.log方法 其他输出方法：debug，info，warn，error方法 console.table方法 console.assert方法 time和timeEnd方法 分组方法：group和groupend 其他方法 命令行API debugger语句 移动端开发 模拟手机视口（viewport） 模拟touch事件 模拟经纬度 远程除错 Google Closure Javascript 性能测试 第一种做法 第二种做法 参考链接 开发者工具 目前，各大浏览器都自带开发工具。以Chrome浏览器为例，打开它的“开发者工具”（Developer Tools）的方法有三种。 按F12或者Control+Shift+i。 在菜单中选择“工具”/“开发者工具”。 在一个页面元素上，打开右键菜单，选择其中的“Inspect Element”。 打开以后，可以看到在顶端有八个面板卡可供选择，分别是： Elements ：用来调试网页的HTML源码和CSS代码。 Resources ：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。 Network ：查看网页的HTTP通信情况。 Sources ：调试JavaScript代码。

各种宿主环境提供额外的 API（即只能在该环境使用的接口），以便 JavaScript 调用。以 浏览器 为例，它提供的额外 API 可以分成三大类。 浏览器控制类：操作浏览器 DOM 类：操作网页的各种元素 Web 类：实现互联网的各种功能 如果宿主环境是 服务器 ，则会提供各种操作系统的 API，比如文件操作 API、网络通信 API等等。这些你都可以在 Node 环境中找到。 JSON （JavaScript Object Notation） JS对象简谱，一种轻量级的数据交换格式 “ Atwood 定律 ”： “所有可以用 JavaScript 编写的程序，最终都会出现 JavaScript 的版本。” DHTML （Dynamic HTML，动态 HTML） DOM 模式（Document Object Model，文档对象模型） Ajax 方法（Asynchronous JavaScript and XML） GWT （Google Web Toolkit） 推荐安装 Chrome 浏览器，它的“开发者工具”（Developer Tools）里面的“控制台”（console），就是运行 JavaScript 代码的理想环境。 进入 Chrome 浏览器的“控制台”，有两种方法。 直接进入：按下Option + Command + J（Mac）或者 Ctrl +