玩转 Chrome -- 小白篇
by 小鱼二 2017年01月11日
为什么使用 Chrome?
1 简洁 强大
2 插件丰富
3 Chrome DevTools
0 准备工作
1 翻墙
2 下载最新的 Chrome
v55 (https://www.google.com/chrome/browser/desktop/index.html)
开发人员可以下载金丝雀版本
v57 (https://www.google.com/chrome/browser/canary.html)
chrome 可以打开很多类型的文件
纯文本文件,图片文件,PDF,视频等
技巧 1
隐身模式 (Ctrl, Cmd + shift + n)
如果不希望 Google Chrome 保存访问和下载记录,可以在隐身模式下以私密方式浏览网页
(可以避免插件和缓存的影响)
技巧2
科普: 键盘操作比鼠标操作快的多的多
快捷键大全 https://support.google.com/chrome/answer/157179
推荐插件:
vimium
https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb
技巧 3: 快捷键
什么是 userAgent
模拟微信
(Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X)
AppleWebKit/601.1.46 (KHTML, like Gecko)
Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/0.7.0
MicroMessenger/6.3.9 Language/zh_CN webview/0)
推荐一个插件
emmet-review 响应式测试 (推荐给测试或者设计师)
https://chrome.google.com/webstore/detail/emmet-review/epejoicbhllgiimigokgjdoijnpaphdp
技巧 4: 手机模式

技巧 5: 搜索框
搜索框 多搜索引擎搜索 及 设置默认搜索引擎
设置-->高级设置--> 管理搜索引擎
或者 chrome://settings/searchEngines
http://stackoverflow.com/search?q=%s
https://www.google.com/#q=%s
https://www.baidu.com/s?wd=%s
http://www.zhihu.com/search?q=%s
http://s.taobao.com/search?q=%s
http://s.weibo.com/weibo/%s?frm=opensearch
https://en.wikipedia.org/wiki/search?q=%s
https://www.sogou.com/web?ie={inputEncoding}&query=%s
技巧 6 插件及应用
技巧 6 插件及应用
技巧 6 插件及应用
技巧 6 插件及应用
6.5 插件管理
better-extension-manager
技巧 7
Chrome DevTools 初体验
前端技术介绍
chrome-devtools
如何上报 bug
前端技术简介
传说中的 H5 到处是什么...
HTML(5) + CSS(3) + JS
(框架 + 样式 + 交互)
Chrome DevTools
Chrome DevTools
-
Elements
Chrome DevTools
-
Network
Chrome DevTools
-
Console
Chrome DevTools
-
Application
如何愉快的向前端工程师交流问题
(如何理直气壮的指出这是你的 bug)
彩蛋
谢谢大家 :D
玩转 Chrome 小白篇
By xy2
玩转 Chrome 小白篇
- 4,569