From 9f40d9f729faae5822c34fe2fa116516b140651e Mon Sep 17 00:00:00 2001 From: Yoonsuhyeok Date: Fri, 17 Apr 2020 21:18:19 +0900 Subject: [PATCH] add Image, add Highlites --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index b749be3..07de215 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,24 @@ Help us maintain an inclusive environment by following our [code of conduct](COD # About DevTools +## Highlights + +* [Inactive CSS](https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools): +Firefox DevTools now grays out CSS declarations that don’t have an effect on the page. When you hover over the info icon, you’ll see a useful message about why the CSS is not being applied, including a hint about how to fix the problem. +![Inactive_CSS](https://www.mozilla.org/media/img/firefox/developer/hero-inactive-css.40a2e0b8ddb1.png) + +* [Master Gird](https://mozilladevelopers.github.io/playground/css-grid/): +Grid Firefox is the only browser with tools built specifically for building and designing with CSS Grid. These tools allow you to visualize the grid, display associated area names, preview transformations on the grid and much more. +![Master_Gird](https://www.mozilla.org/media/img/firefox/developer/hero-cssgrid-ani.c0a7ace9dbf7.gif) + +* [Shape Path Editor](https://developer.mozilla.org/ko/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes): +The Shape Path Editor is a tool helps you see and edit shapes created using `clip-path` and also the CSS `shape-outside` property and `` values. This guide walks you through all available options. +![Edit_Sharpe](https://www.mozilla.org/media/img/firefox/developer/hero-clip-ani.84bcdc90782a.gif) + +* [Fonts Panel](https://developer.mozilla.org/ko/docs/Tools/Page_Inspector/How_to/Edit_fonts): +The new fonts panel in Firefox DevTools gives developers quick access to all of the information they need about the fonts being used in an element. It also includes valuable information such as the font source, weight, style and more. +![Fonts_Panel](https://www.mozilla.org/media/img/firefox/developer/hero-fonts.0e574b98aa63.gif) + ## Leadership DevTools is divided into [modules](https://wiki.mozilla.org/Modules) which are managed by team members with expertise in that part of the project.