文档章节

SegmentFault 技术周刊 Vol.15 - “一天精通 Chrome 开发”

SegmentFault
 SegmentFault
发布于 2016/12/21 10:54
字数 1342
阅读 24
收藏 0

weekly-vol015

遍历 Web 浏览器的发展史,有两个非常关键的节点:IE 捆榜到 Windows 系统和 Google Chrome 的发布,IE 捆绑开始了浏览器大范围的推广使用,而 Chrome 则成为浏览器进入一个全新阶段的起点。

2008 年,在 IE、Firefox、Opera 的乱世里现身的 Chrome,简直是 Web 浏览器里的清流,“干净、简单、快速”,之后以其版本号升级般的快速发展,对 Web 标准、程序开发甚至整个互联网行业的推动做出了巨大的贡献。

如今,Chrome 在 Web 浏览器的市场占有率已经是第一,但它的更新还在跟着版本号一样的快速前行……所以,我们今天准备了一期相关的内容——《“一天精通 Chrome 开发”》,作为第 15 期周刊的主题。

本期周刊,将分为控制台与调试技巧、扩展和应用的学习及示例两个部分。好了,开始吧。

Chrome 开发技巧

1. 控制台

帮你开启上帝视角,从一个简单的 console.log(); 展开,呈现远不止于此的强大控制台。

2. 开发者工具:你不知道的 Chrome DevTools 系列 by @civerzhu

“Chrome 开发者工具作为 Web 前端开发性能调试的必备工具,连隔壁的产品小哥都知道打开 F12 改一下页面元素的标签代码就能看到页面效果。”

但是它能做的远不止平常用的那么简单,这一个小小的开发工具集成了很多高级的功能,作者这个系列的文章,就是对开发者工具的系统学习。

3. 优化页面性能

使用 Chrome DevTools 的 Timeline 分析页面性能 // Horve大叔

Chrome TimeLine 工具可以很好地辅助分析页面的性能瓶颈,提供详细全面的分析数据,为性能优化提供数据依据,以及还包括如 Memery Mode、Screen Shot 等多种多样的技巧,非常强大。

4. 各种奇技增加效率

通过各种扩展,强化浏览器,各种前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高效率的强大扩展;快速获取调试技巧,增加开发效率,这两者对前端开发者尤其是不可或缺的。

看了这么多,要不先试试这个技巧?

data:text/html, <textarea style="width: 100%; height: 100%; border: none; outline: none" autofocus />

Apps & Extensions

5. 写一个简单的扩展吧

如何注册成为 Google 开发者、如何开始写 Manifest 文件(browser_action, options_page, permissions, background, chrome_url_overrides, 调试)、如何优化及丰富功能,按这四个步骤,手把手教学。

6. 认真进阶

一个二维码生成器、一个笔记剪辑、一个微博界面改造,非常优秀的学习作品,你也可以写一个。

7. 看看实例,提高一下姿势水平

用了这么多年 Chrome,见过太多奇(tian'ma)奇(xing'kong)怪(hen)怪(zan)的插件和应用了,私货就不跟大家分享了,这里整理出社区里产生的一些扩展应用,很有意思,也值得学习。

8. 附加阅读

这些,你觉得一天可以精通吗?

(本期完)


# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。周刊筛选的每篇内容,是作者的独到见解,踩坑总结和经验分享。

每周二更新,欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

© 著作权归作者所有

SegmentFault
粉丝 17
博文 24
码字总数 41594
作品 2
杭州
高级程序员
私信 提问
Chrome OS出错:Chromebook提前收到终止更新通知

就像Android手机一样,Chromebook也会有终止更新的一天。庆幸的是,停更日期通常是Chromebook原始版本发布后的五年,这方面谷歌Chrome OS做得非常到位。9月9日消息,据9to5Google报道,Chrom...

快科技
09/09
0
0
Chrome Stable 分支进入 V15 后紧急升级到 15.0.874.106

Chrome V15已经出世,尽管很多功能我们在Dev分支和Chromium出现时都报道过了,但面对众多Stable用户,在此还是回顾一下。首先是重新设计的新建标签页,融入了一些移动界面的元素,将应用和最...

红薯
2011/10/28
1K
0
Canary Build现能让Chrome新标签页壁纸每日自动更新

据外媒报道,Chrome新标签页(New Tab Page)将很快会变得更加有趣,谷歌在最近发布的Chrome Canary Build版本中加入了每日旋转壁纸功能。 现在通过Chrome Canary 78.0.3879.0或更高版本,如果...

稿源:
08/12
0
0
Chrome 将停止支持 PNaCl ,拥抱 WebAssembly

Chrome 从 2013 年开始支持 PNaCl(Portable Native Client),为开发者提供了一种技术去构建高性能的 Web 应用,但这项技术只有 Google 支持。源自 Mozilla Asm.js 项目的 WebAssembly 技术...

两味真火
2017/05/31
3.9K
15
奇舞周刊第 259 期:数据驱动改进前端体验的 Guess.js

记得点击文章末尾的“阅读原文”查看哟~ 下面先一起看下本期周刊摘要吧~ 时间过得好快,转眼又到周五~ 上穷碧落下黄泉,周刊君从数十篇文章中,为你挑选了本期的九篇文章,愿你有(gei)所(...

奇舞周刊
2018/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
10
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部