webpack 2 入门

webpack 2将在文档完成后将正式发布(webpack 2.2 中文文档)。 但这并不意味着你现在不能开始使用版本2,如果你知道如何配置它的话。

webpack 2.2 已经正式发布! 现在通过 npm 安装 webpack 会自动安装 v2 版本。

什么是 webpack ?

简单来说,webpack 是一个针对 JavaScript 代码的模块打包工具。然而,自从它的发布,它逐渐发展成为所有前端代码的管理工具(不管是其本身有意还是社区的意愿)。 继续阅读

Chrome DevTools 中文文档

Chrome DevTools 中文文档地址:http://www.css88.com/doc/chrome-devtools/

Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演,调试和剖析您的网站。

注意:寻找最新版本的Chrome 开发者工具,Chrome Canary总是有最新的DevTools。

打开Chrome 开发者工具

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 “检查”。
  • 使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

继续阅读

Chrome DevTools – 测试响应和设备特定可视窗口

更新后的Device Mode(设备模式)(从Chrome 49开始)是现在“移动优先”开发工具的一个组成部分,并扩展了主要的DevTools 工具条。了解如何使用其控件来模拟各种设备或完全响应式。

TL;DR

  • 使用Device Mode(设备模式)的屏幕模拟器测试你的网站的响应式布局。
  • 保存自定义预设,以便以后轻松访问它们。
  • 设备模式不能完全代替真实设备的测试。 注意其局限性。 继续阅读

Chrome DevTools – 使用设备模式模拟移动设备

使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。

简而言之

Chrome DevTools – 检查资源

按框架、域、类型或其他标准来组织管理资源。

TL;DR

  • 使用 Application(应用)面板的Frames(框架)窗格按frame(框架)组织管理资源。
  • 您还可以在Sources(源文件)面板中,通过禁用group by folder(按文件夹分组)选项,来按frame(框架)查看资源。
  • 要按域和文件夹查看资源,请使用Sources(源文件)面板。
  • Network(网络)面板中可以按照名称或其他条件过滤资源。

按frame(框架)组织管理资源

Application(应用)面板的Frames(框架)窗格中,以frame(框架)方式表示您的页面资源。 继续阅读

Chrome DevTools – 检查和删除 Cookie

Application(应用)面板中检查和删除 cookie。

TL;DR

  • 查看有关cookie的详细信息,例如其名称,值,域,大小等。
  • 删除单个Cookie,所选网域中的Cookie,或所有域中的所有Cookie。

概述

使用Cookie窗格查看和删除 cookie。 您不能修改cookie值。

cookie窗格 继续阅读

Chrome DevTools – 检查和管理Storage, Databases 和 Caches

Application(应用)面板检查和管理Storage(存储)、 Databases(数据库)和Caches(缓存)。

TL;DR

  • 查看和编辑本地和会话存储。
  • 检查和修改 IndexedDB 数据库。
  • 在Web SQL数据库上执行语句。
  • 查看 Application 和 Service Worker 缓存。
  • 单击按钮,清除所有存储,数据库,缓存和service workers。

Local storage(本地存储)

如果您使用local storage(本地存储)来存储键值对(KVP),您可以在Local Storage(本地存储)窗格中检查,修改和删除这些键值对(KVP)。

本地存储窗格 继续阅读

Chrome DevTools – 了解安全问题(Security 面板)

HTTPS为您的网站提供关键安全和数据完整以及用户的隐私数据信息。使用Chrome DevTools中的Security(安全)面板可以调试安全隐患,并确保您已在网站上正确实施HTTPS。

TL;DR

  • 使用Security中的Overview(概述)立即查明当前页面是否安全。
  • 检查单个origins来查看连接和证书详细信息(对于Secure Origins)或者确定哪些请求是不受保护的(对于Non-Secure Origins)。

Security Overview (安全概述)

要查看页面整体的安全性,打开DevTools并转到Security面板。

你看到的第一件事是Security Overview(安全概述)。一目了然,Security Overview(安全概述)会告诉您的页面是否安全。安全的页面会显示信息:his page is secure (valid HTTPS). 继续阅读

Chrome DevTools – 调试 Progressive Web Apps

使用Application面板检查、修改和调试Web应用程序的manifests,service workers 和 service worker 缓存。

相关指南:

本指南仅讨论Application面板的功能。如果你正在寻找其他面板的帮助文档,请查阅本指南中最后一部分,其他Application面板指南

TL;DR

  • 使用 App Manifest 窗格检查Web应用程序 manifest ,并触发Add to Homescreen(添加到主屏幕)事件。
  • 使用 Service Worker 窗格可查看所有与 Service Worker 相关的任务,如取消注册或更新服务,模拟推送事件,离线,或停止Service Worker。
  • Cache Storage 窗格查看Service Worker的高速缓存。
  • Clear Storage窗格中单击相应的按钮,来取消注册Service Worker并清除所有存储和高速缓存。

Web app manifest

如果您希望用户能够将您的应用添加到他们的移动设备的主屏幕中,您需要一个 web app manifest。 manifest 定义应用程序如何显示在主屏幕上,指导用户从主屏幕启动,以及应用程序在启动时的样式。 继续阅读

Chrome DevTools – 键盘和UI快捷键参考

原文已经修改,只剩键盘快捷键,译文暂不修改。

Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间。

本指南提供了Chrome DevTools中每个快捷键的快速参考。虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于特定的某些单个面板,并根据它可以使用的位置分解。

您还可以在提示工具中找到快捷方式。将鼠标悬停在某个元素上以显示其提示工具。如果元素有快捷方式,提示工具将会包含它。

打开开发者工具

在Google Chrome中的任何网页或APP都可以打开开发者工具:

  • 在浏览器窗口的右上角打开Chrome menu Chrome menu(愚人码头注:新版本的Chrome menu图标为:Chrome menu), 然后选择 Tools(工具) > Developer Tools(开发者工具)。
  • 右键点击页面上任何元素并选择 Inspect Element(检查元素)。 继续阅读