Google浏览器(chrome)

1. 技术目标

  • 下载安装配置(版本 67.0.3396.99(正式版本) (64 位))
  • 后台开发
  • 前段调试
  • 快捷键使用
  • 精准搜索

2. 后台开发

2.1 基本使用
  1. 下载绿色的mychrome安装包。可以到zdfans,版本 67.0.3396.99(正式版本) (64 位)
  2. 对浏览器进行简单的配置。
  3. 设置Google Chrome为默认浏览器

注意:鼠标的中间键的作用可以是在新的tab页打开链接

2.2 安装相应的插件

相应插件。(谷歌访问助手、postman、Postman Interceptor、JSONView、cookie、baidudl、Vimium、HostAdmin App)

Google浏览器(chrome)_第1张图片
谷歌访问助手

Google浏览器(chrome)_第2张图片
Postman组合使用

Google浏览器(chrome)_第3张图片
EditThisCookie工具
Google浏览器(chrome)_第4张图片
JSONView

Google浏览器(chrome)_第5张图片
GitHub源码阅读

Google浏览器(chrome)_第6张图片
单词记忆

Google浏览器(chrome)_第7张图片
页面
Google浏览器(chrome)_第8张图片
键盘操作

3. 前段调试

3.1调试技巧
  1. debugger
除了console.log, debugger是我们最喜欢、快速且肮脏的调试工具。执行代码后,Chrome会在执行时自动停止。你甚至可以把它封装成条件,只在需要时才运行。
if (thisThing) {
    debugger;
}
备注:F10为单步调试;F8为跳到下一个断点处。
  1. 使用 console.time() 和 console.timeEnd() 测试循环
要得知某些代码的执行时间,特别是调试缓慢循环时,非常有用。 甚至可以通过给方法传入不同参数,来设置多个定时器。来看看它是怎么运行的:
console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
console.timeEnd('Timer1');
  1. javascript的简写方式
1. 三目运算符
const x = 20;
let answer;if (x > 10) {
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}
const answer = x > 10 ? 'greater than 10' : 'less than 10';
  1. 循环语句
当使用纯 JavaScript(不依赖外部库,如 jQuery 或 lodash)时,下面的简写会非常有用。
for (let i = 0; i < allImgs.length; i++)
简写为:
for (let index of allImgs)
下面是遍历数组 forEach 的简写示例:
function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);// logs:// a[0] = 2// a[1] = 5// a[2] = 9
  1. 声明变量
在函数开始之前,对变量进行赋值是一种很好的习惯。在申明多个变量时:
let x;
let y;
let z = 3;
可以简写为:
let x, y, z=3;
  1. if 语句
在使用 if 进行基本判断时,可以省略赋值运算符。
if (likeJavaScript === true)
简写为:
if (likeJavaScript)
  1. 变量赋值
当将一个变量的值赋给另一个变量时,首先需要确保原值不是 null、未定义的或空值。
可以通过编写一个包含多个条件的判断语句来实现:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}
或者简写为以下的形式:
const variable2 = variable1  || 'new';
  1. 箭头函数
经典函数很容易读写,但是如果把它们嵌套在其它函数中进行调用时,整个函数就会变得有些冗长和混乱。这时候可以使用箭头函数来简写:
function sayHello(name) {
  console.log('Hello', name);
}
 
setTimeout(function() {
  console.log('Loaded')
}, 2000);
 
list.forEach(function(item) {
  console.log(item);
});

简写为:
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

4. 精准搜索

4.1用 site 命令

科学上网 site:zhihu.com OR site:jianshu.com

你可能感兴趣的:(Google浏览器(chrome))