GOOGLE浏览器

简介:

谷歌开发工具(以下用开发者工具简称),是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。
注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版

简单快捷键

Ctrl + Shift + J ( 或在 Mac 上使用 Cmd + Opt + J) 打开开发者工具同时集中焦点于控制台
Ctrl + [ 和 Ctrl + ] 快捷键在面板之间移动
Ctrl + o (windows,Linux) Cmd + o (Mac OS X) 搜索全部的脚本,样式表和文件片段
Ctrl + F (Windows,Linux) Cmd + F (Mac OS X) 当前文件搜索文字
Ctrl + Shift + F (Windows,Linux) Cmd + Opt + F (Mac OS X) 在所有文件中搜索文字
Ctrl + Shitf + O (Windows,Linux) Cmd + Shitf + O (Mac OS X) 当前文件打开一个对应函数或者选择器
Ctrl + Shift + E 选中代码在控制台执行
Cmd + K,^ + L(Mac) Ctrl + L( Linux 和 Windows ) 清除控制台信息

控制台常用操作

clear() 清除控制台信息
console.log("Authenticating user '%s'", 33); 方法会使用一个或者多个表达式来作为参数,之后会将他们当前的值输出到控制台中
console.error("Error: %s (%i)", "Server is not responding",500); 输出错误信息
console.warn('Warning! Too few nodes (%d)', 2); 输出警告信息
console.assert(1 < 2, "Node count is > 500"); 第一个参数为false才显示错误信息
console.dir($('#id')); 打印出字符,比如dom节点可复制片段
console.group("Authentication phase");
console.groupEnd(); 打印分组
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]); //打印表格
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);
console.table(family, ["firstName", "lastName", "age"]);
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large"); //打印有样式的字
//计算时间开销
console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array initialize");
//分析cpu使用情况
console.count('1'); //打印出输出相同字符的次数
console.trace(a()); //寻找某个方法被调用的追踪路径

解释谷歌浏览器选项卡功能

1、Element
查看页面div渲染元素,可以查看并修改css样式
2、Console
模拟js执行环境,可以打印页面js相关变量信息,通过打印值查看js执行情况
3、Sourses
当前页面所有的页面代码都会显示在这,相当于本地文件,通过修改这里的文件,可以实时修改页面内容,也可在此设置断点
4、Network
页面网络请求情况,筛选出XHR,JS,CSS,IMG等文件,包括请求时间,请求大小,请求状态等。
5、Performance
页面性能状态分析
6、Memory
记录chrome内存使用情况的
7、Application
记录页面缓存,Local Storage,Session和cookie等
8、Security
网页请求安全分析,证书分析

谷歌浏览器插件推荐

FE助手 代码压缩美化正则取色等
JsTracker 分析页面js使用情况
octotree github网站树的形式浏览代码
HTML5 storage manager all in one 本地存储管理器
Adblock Plus 去广告
JSONview 方便浏览json文件
印象笔记 记录学习笔记