Update Overview.md

md/Learn-Basics/Overview.md

@@ -1 +1,47 @@
-Chrome开发者工具是一套内置于google chrome浏览器的开发、调试工具。开发人员可以通过开发者工具深入浏览器的内部机制及他们自己所开发的web应用。
+##提升渲染性能
+
+**时间线**面板为你展示一个完整概览，告诉你当网页或应用进行加载并被使用的过程中时间都是怎么消耗的。从加载资源文件到解析JavaScript、计算样式、重绘，所有时间都展示在时间线面板。
+
+![](https://developer.chrome.com/devtools/devtools/images/timeline-panel.png)
+*展示各事件的一个例子*
+
+[了解更多关于如何提升渲染性能](https://developer.chrome.com/devtools/devtools/docs/timeline)
+
+##JavaScript和CSS性能
+
+**分析面板**允许你分析某个web应用或网页执行时间和内存占用。这些信息可以帮助你弄清楚资源被消耗在了哪里，然后帮助你优化你的代码。有以下三种类型的分析：
+
+- **CPU分析**展示执行时间花费在了你的网页中哪些JavaScript函数中
+- **堆分析**展示你的网页中JavaScript对象和相关DOM节点的内存分配情况
+- **JavaScript分析**展示你的脚本中执行时间的消耗情况
+
+![](https://developer.chrome.com/devtools/devtools/images/profiles-panel.png)
+*一个堆快照的例子*
+
+[了解更多股阿奴与偶如何提升JavaScript和CSS性能](https://developer.chrome.com/devtools/devtools/docs/profiles)
+
+##查看存储
+
+**资源面板**允许你查看正在被查看的网页已经加载的资源。它允许你与HTML5 数据库(Local Storage， Cookies， 应用缓存等)进行交互
+
+![](https://developer.chrome.com/devtools/devtools/images/resources-panel.png)
+*展示在资源面板中的javaScript文件(来自[web开发入门包](https://developers.google.com/web/starter-kit/))*
+
+[了解更多关于查看资源存储的信息](https://developer.chrome.com/devtools/devtools/docs/resource-panel)
+
+##更多资料
+
+开发者工具文档还有其他一些信息对你非常有用，它们包括：
+
+- [堆分析](https://developer.chrome.com/devtools/devtools/docs/heap-profiling)
+- [CPU分析](https://developer.chrome.com/devtools/devtools/docs/cpu-profiling)
+- [设备模式和移动端模拟](https://developer.chrome.com/devtools/devtools/docs/device-mode)
+- [远程调试](https://developer.chrome.com/devtools/devtools/docs/remote-debugging)
+- [开发者工具视频](https://developer.chrome.com/devtools/devtools/docs/videos)
+
+##更多资料
+
+你在[@ChromiumDev](http://twitter.com/ChromiumDev)可以关注我们，或者通过[论坛](https://groups.google.com/forum/?fromgroups#!forum/google-chrome-developer-tools)提问
+
+![](https://developer.chrome.com/devtools/devtools/images/image13.png)
+*在控制台进行格式化打印*