Chrome设置你的构建工具

学习如何通过一组构建过程工具提升开发效率和创建快速加载的网站。每个网站都应该有一个开发版本和一个生产版本。 开发版本具有所有的HTML,CSS,JS和图像文件,如果你的网站结构很干净,这样你很乐意为之工作。 生产版本将获取这些文件,压缩,合并它们并优化图像等文件。 Web开发人员必须同时考虑很多事情,而构建是最关键的步 ...阅读更多

Posted on

Chrome设置浏览器扩展

每个桌面浏览器都有一套开发工具,开箱即用,您可以将他们添加到您的浏览器的扩展或插件。 以下是两个具有一些实用功能的Chrome扩展程序,可帮助您调试设计。 Emmet Re:View Emmet Re:View是一个工具,它可以让你轻松查看您的网站在每个媒体查询(media queries)中的样子,并同步所有页面的滚 ...阅读更多

Posted on

Chrome设置命令行快捷方式

为您重复使用的命令行任务设置快捷方式。如果你发现自己需要在命令行中重复输入同样的东西,那么设置命令行快捷方式非常有必要。 这篇文章的主要内容为: 使命令行为您工作;创建容易记住和快速键入的别名。 尝试保存 Github dotfiles 项目,共享和同步您的命令行快捷方式。 如何设置快捷方式 创建命令行快捷方式的最简单 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具设置CSS和JS预处理器

正确使用CSS预处理器(如Sass),以及JS预处理器和转换器可以大大提升你的开发效率。本文讲解如何设置设置CSS和JS预处理器。 这篇文章的主要内容为: 预处理器允许您使用浏览器原生不支持的CSS和JavaScript中的特性,例如,CSS变量。 如果你使用预处理器,使用Source Maps(源映射)将原始源文件映 ...阅读更多

Posted on

Chrome使用 DevTools Workspaces(工作区)保存更改

在Chrome DevTools中设置持久化编写,以便您可以立即查看更改并将这些更改保存到磁盘。 Chrome DevTools允许您更改网页上的元素和样式,并实时查看更改效果。 默认情况下,刷新浏览器,更改就会消失,除非您已经手动将其复制并粘贴到外部编辑器中,并保存。 Workspaces(工作区)允许您将这些更改保 ...阅读更多

Posted on

Chrome设置编辑器

您的代码编辑器是您主要的开发工具;你使用它来编写和保存代码。通过学习编辑器的快捷方式和安装主要的插件,可以使你更好,更快编写代码。 这篇文章的主要内容为: 选择一个编辑器,您可以自定义快捷方式,并有许多插件可以帮助您更好,更快编写代码。 使用包管理器,以便使你更容易发现,安装和更新插件。 安装有助于提高开发效率的插件; ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具远程调试协议

在底层,Chrome 开发者工具是用 HTML,JavaScript 和 CSS 写的 Web 应用程序。在 Javascript 运行时,它提供一个特殊的绑定,这允许它与 chrome 网页进行交互并且容许装载它们。交互协议包括被发送到页面的命令,和该页面生成的事件。尽管 Chrome 开发者工具是该协议的主要客户, ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具扩展 DevTools

一个 DevTools 插件能增加功能到 Chrome DevTools 中来.它能够增加新的 UI 面板和侧边栏,能与被检查的页面进行通信,能获得关于网络请求的信息,以及其他的功能。详见显式的 DevTools 插件。DevTools 插件能够访问一组额外特定 DevTools 扩展 API: devtools.in ...阅读更多

Posted on

Chrome开发者工具整合 DevTools

Chrome DevTools 是可扩展的。因此,如果 DevTools 缺少你需要一个功能,你可以找到一个现有的插件,或者自己写一个扩展程序。或者你也可以将开发者工具功能集成到你的应用程序中。 有两种基本方式使用 DevTools 建立一个自定义的解决方案: DevTools Extension(开发者工具扩展程序) ...阅读更多

Posted on

Chrome DevTools开发者工具如何使用分配分析器工具

使用分配分析器工具来查找未被正确地垃圾收回收,并继续保留在内存中的对象。 分配分析器如何工作 allocation profiler(分配分析器)结合了堆分析器中快照的详细信息以及Timeline(时间轴)面板的增量更新以及追踪信息。与这些工具相似,追踪对象堆的分配过程包括开始记录,执行一系列操作,以及停止记录并分析。 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具了解内存术语

本节介绍内存分析中使用的常用术语,同样适用于其他不同语言的内存分析工具。 这里描述的术语和概念适用于Chrome DevTools堆分析器。如果你曾经使用过Java,.NET,或其他一些内存分析器,那么该篇的内容对你而言就是一次提升。 对象的大小 将内存想象为具有原始类型(如数字和字符串)和对象(关联数组)的图形。它可 ...阅读更多

Posted on

Chrome DevTools谷歌浏览器开发者工具修复内存问题

了解如何使用Chrome DevTools查找影响网页性能的内存问题,包括内存泄漏,内存膨胀和频繁的垃圾回收。 这篇文章的主要内容为: 使用Chrome任务管理器,了解您的网页使用的内存量。 使用时间轴记录可视化内存使用。 使用堆快照标识分离的DOM树(内存泄漏的常见原因)。 通过分配时间轴记录了解在JS堆中分配新内存 ...阅读更多

Posted on