웹 개발(web development) 프로젝트 의 속도를 높이거나 협업하거나 감사하기 위해 유용한 도구가 필요한 디자이너라면 Chrome 확장 프로그램에는 다양한 도구가 있습니다.
이 목록은 디자인 작업(design work) 을 수행하는 모든 사용자가 키트 가방(kit bag) 에 가지고 있어야 하는 가장 인기 있고 일부는 필요하다고 주장하는 도구와 Chrome 확장 프로그램으로 구성되어 있습니다.
1. DomFlags
DOM 플래그(DOM Flags) 는
개발자가 브라우저 도구로 작업할 수 있는 새로운 방법을 제공하는 사용하기 쉬운 Chrome 확장 프로그램 입니다. (Chrome extension)이를 통해 개발자는 요소 스타일 지정 작업의 속도를 높일 수 있습니다.
각 요소에 대한 키보드 단축키를 사용하여 탐색을 북마크할 수 있습니다.
우리 모두는 매우 상세한 요소를 검사하는 데 어려움을 경험했으며 길을 잃기 쉽습니다.
DOM 플래그(DOM Flags) 를 사용하면 구성 요소를 자동으로 정확하게 검사하는 기능이 포함된 스타일 요소를 추적할 수 있습니다. 이는 결과적으로 DevTools 워크플로 및 구현(DevTools workflow and implementation) 속도를 높이는 데 도움이 됩니다 .
DOM 플래그(DOM Flags) 를 사용하면 변경 사항을 추적할 수 있습니다. 그리고 작업 중인 요소에 계속 초점을 맞추세요.
2. 시지
Sizzy 는 디자이너와 개발자에게 여러 뷰포트에서 사이트를 테스트할 수 있는 간단한 방법을 제공합니다.
Sizzy 는 실시간으로 디자인을 확인할 수 있는 간단한 방법을 제공합니다. 다양한 장치와 화면 크기에 대한 대화형 보기를 제공합니다. 장치 키보드(device keyboard) 를 시뮬레이션한 다음 가로 모드와 세로 모드(landscape and portrait modes) 간에 전환
할 수도 있습니다 .
Chrome 확장 프로그램(Chrome extension) 을 설치하면 툴바에 버튼이 추가되며, 이 버튼을 클릭하면 Sizzy 플랫폼(Sizzy platform) 에서 현재 URL 이 열립니다 . 확장 프로그램은 모든 " x-frame-options(x-frame-options) " 헤더 를 차단 하므로 모든 웹사이트를 온라인으로 볼 수 있습니다.
Sizzy 는 오픈 소스 프로젝트 이며 (source project)여기(here) 에서 전체 코드를 볼 수 있습니다 .
3. 체크봇
Checkbot 은 보안 문제에 대해 사이트를 테스트하고 웹사이트 페이지 로딩 속도를 감사할 수도 있습니다. 이것은 디자이너에게 일반적인 오류를 식별하는 수단을 제공하고 사이트 보안(site security) , 검색 엔진(search engine) 및 사이트 속도(site speed) 의 개선을 권장 합니다.
50개 이상의 모범 사례 지표를 사용하여 모범 사례 SEO , 깨진 링크, 중복 콘텐츠(duplicate content) 등에 대해 웹사이트를 감사합니다 . 이 도구는 CSS(CSS) , JS 및 HTML 도 검증 합니다.
Checkbot은 디자이너와 코더의 오류(designer and coder errors)
를 실시간으로 찾아내어 반복적으로 작업을 다시 확인해야 하는 수고를 덜어줍니다.
깨진 페이지 링크를 수정하는 양질의 도구(quality tool) 를 찾고 있다면 고유한 콘텐츠와 페이지 제목(content and page titles) 을 확인 하고 리디렉션 체인을 제거하면 이 도구가 유용할 것입니다.
디자이너의 경우 CSS 및 JS를 최소화하고 CSS를 최소화하고 브라우저 캐싱을 활용하는 방법에 대한 권장 사항을 제공하는 데 도움이
될 (CSS)수(CSS and JS) 있습니다 .
4. GistBox 클리퍼
GistBox 는
웹 디자이너에게 가장 유용한 Chrome 확장 프로그램 중 하나입니다.(Chrome)
GistBox 는 보고 있는 웹 페이지의 모든 코드 블록 에서 (code block)GitHub Gist 를 생성할 수 있습니다 .
코드 블록의 오른쪽 상단 모서리(right-hand corner) 에 작은 버튼이 표시됩니다. 이 버튼을 누르면 Gist 에 코드를 저장할 수 있는 팝업이 표시됩니다 .
마우스 오른쪽 버튼을 클릭하여 새로운 Gist를 생성하고 나중에 검사하고 사용할 수 있도록(inspection and use) 코드 블록을 저장할 수 있습니다 .
GitHub 와 통합 하면 디자이너와 개발자가 코드 블록을 수집하고 조작하거나 나중에 사용할 수 있도록 분류할 수 있습니다. 이를 통해 편리하고 효율적인 (convenient and efficient) Chrome 확장(Chrome extension) 도구가 됩니다.
5. 컬러질라
ColorZilla 는 개별 (ColorZilla)웹 디자인(web design) 프로젝트 에 대해 태그를 지정하고 레이블을 지정하고 분류할 수 있는 16진수 코드를 수집하는 데 매우 유용한 Chrome 확장 프로그램입니다 .
모든 웹 페이지에서 색상을 추출하고 ColorZilla 클립보드에 저장할 스포이드 도구를 선택할 수 있습니다.
이를 통해 나중에 사용할 수 있도록 색상 팔레트를 신속하게 개발할 수 있으며 웹 디자인 및 개발(design and development) 에서 일관되게 색상을 사용할 수 있습니다 .
ColorZilla 는 또한 이미지를 (ColorZilla)CSS 로 변환할 수 있도록 색상 분석기 및
CSS 그라디언트 편집기(gradient editor) 역할을 합니다 .
6. 왓폰트
이
Chrome 확장 프로그램(Chrome Extension) 은 자신이 좋아하는 글꼴을 활용하고 자신의 웹 디자인 프로젝트(web design project) 에 통합하려는 사람들을 위한 진정한 시간 절약 기능입니다 .
WhatFont Chrome 확장 프로그램(WhatFont Chrome extension) 을 사용하면 개발자가 모든 웹 페이지의 거의 모든 글꼴을 빠르게 분석하고 식별할 수 있습니다.
확장 기능은 잘 개발되었으며 검사 도구를 열지 않고 글꼴 위로 마우스를 흔드는 것만으로 확장 기능이 작동합니다.
뿐만 아니라 확장 프로그램은 Pages go(Pages) 글꼴 을 제공하는 데 사용되는 서비스를 식별하고 Google 글꼴 API 및 Typekit을 지원합니다.(Google Font API and Typekit.)
7. 라이트샷
LightShot 은 페이지 전체 또는 일부를 캡처하여 업로드하거나 다운로드하거나 타사 대상(party destination) 으로 보낼 수 있는 빠른 스크린샷 도구(screenshot tool) 입니다 .
LightShot 으로 찍은 스크린샷 은 소셜 미디어에서 사용 및 공유하거나 인쇄할 수 있습니다.
화면의 선택된 부분에 텍스트, 화살표 등을 추가하고 주석을 달 수 있습니다. 그러나 웹 디자이너를 위한 이 간단한 도구의 가장 뛰어난 기능 중 하나는 이미지를 선택하여 온라인에서 유사한 이미지에 대한 전체 Google 이미지 검색을 진행할 수 있다는 것입니다.(Google image)
LightShot 은 여러 언어로 구성할 수 있습니다.
확장 프로그램은 순수 JavaScript 로 작성되었으며 (JavaScript)Windows , Chromebook , Linux 및 Mac OS(Linux and Mac OS) 에서도 작동합니다 . 또한 데스크톱 응용 프로그램(desktop application) 으로 액세스할 수 있으므로 여러 장치에 의존하는 웹 디자이너에게 탁월한 선택입니다.
8. 멋진 스크린샷
Lightshot 과 마찬가지로 Awesome Screenshot 은 화면 및 이미지 캡처 확장 프로그램입니다.
그러나 여러 가지 면 에서 Lightshot 과 다릅니다 . 멋진 스크린샷(Awesome Screenshot) 은 모든 스크린샷을 Google 드라이브(Google drive) 에 연결하도록 구성할 수 있습니다 .
전체 페이지를 캡처하기 위해 보기를 벗어난 요소를 스크린샷할 수 있습니다. 추가 편집 및 주석 도구(editing and annotation tools) 가 있습니다 . 쉼표를 사용하면 확장 프로그램 내에서 자르고 이미지를 편집할 수 있습니다.
데스크톱용 Chrome 애플리케이션(Chrome application) 을 설치하여 기능을 확장할 수도 있습니다
. 확장 프로그램은 또한 비디오 캡처 및 공유를 허용하므로 모든 사이트에서 작업할 때 다른 개발자 또는 디자이너와 공동 작업할 수 있습니다.
스크린샷에 이미지를 추가할 수 있을 뿐만 아니라 다른 사람에게 보여주고 싶지 않은 파란색 요소를 지우거나 요소 를 지울 수 있습니다.(blue or erase elements)
9. 캐시 지우기
Clear Cache Chrome 확장 프로그램(Cache Chrome Extension) 은 보고 있는 페이지의 쿠키와 캐시를 지울 수 있는 빠르고 간단한 도구입니다. 몇 가지 간단한 페이지 요소를 지우기 위해 브라우저의 설정 페이지로 이동할 필요가 없습니다.
여러 편집 작업을 수행하고 실시간으로 보고 싶은 웹 디자이너에게 이것은 오래된 데이터를 보는 데 따른 많은 좌절감을 없애줄 훌륭한 도구입니다.
캐시와 쿠키를 지워야 할 때가 있지만 Chrome 설정으로 이동하는 것은 지루합니다. 캐시(Cache) 지우기 를 사용하면 버튼 클릭으로 캐시와 전역 또는 로컬 쿠키를 지울 수 있습니다.
캐시(Cache) 지우기 를 사용하면 페이지에서 지우고 싶은 요소를 구성할 수 있습니다. 변수(Variables) 에는 Cash , 다운로드, 모든 시스템, 양식 데이터, at Cash , 인덱스 데이터베이스(index database) , 플러그인 데이터, 비밀번호 등이 포함됩니다.
10. 웹 개발자 구글 크롬 확장 프로그램
웹 개발자 Google Chrome 확장 프로그램 을 사용하면 개발자와 디자이너가 웹 페이지에서 모범 (Web Developer Google Chrome Extension)사례 디자인(practice design) , 코딩, 사용성 및 검색 엔진 최적화
위반 사항을 쉽게 감사, 분석 및 확인할 수 있습니다 .
그것은 우리의 리소스를 탐색하는 데 무겁지 않지만 웹 디자인에 유용한 수많은 정보를 제공하는 훌륭한 올인원 도구이며 웹 사이트 또는 페이지 내의 검색 엔진 최적화 요소도 담당합니다.(search engine optimization)
확장 프로그램은 여러 웹 개발자 도구와 함께 도구 모음을 설치합니다.
이 도구는 여러 장치에서 사용하는 모범 사례(practice use) 와 충돌하는 페이지 크기, 너비 및 치수에 대한 표시를 제공합니다 . 임베디드 JavaScript 를 확인 하고 다양한 장치의 시뮬레이션을 통해 웹 사이트를 볼 수 있습니다.
확장 기능은 Windows , Linux 및 Mac OS에서 잘 작동합니다. 코딩 및 디자인 문제(coding and design issues) 외에도 메타 태그 정보(tag information) , 응답 헤더, 색상 정보(color information) 및 지형 정보에 대한 통찰력도 제공합니다 .
개발자 Chris Pedericks의 웹사이트(Chris Pedericks’ website) 에서 도구의 주요 기능과 전체 기능을 검토할 수 있습니다 .
의심할 여지 없이 웹 디자이너나 개발자(designer or developer) 가 사용할 수 있는 다른 고품질의 유용한 Chrome 확장 프로그램이 많이 있습니다.
이 목록은 가장 인기 있고 유용한 몇 가지 도구를 보여줍니다. 내가 이 목록에 있는 도구보다 더 유용하거나 우수하다고 생각하는 도구에 대한 권장 사항이 있습니까? 알려주십시오.
Top 10 Chrome Extensions and Tools for Web Designers
If you are designer in need of some useful
tools to speed up, collaborate or audit your web deνelopment projects, Chrome
еxtеnsion has a multitude of tools.
This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.
1. DomFlags
DOM Flags is a simple to use Chrome extension
that provides a new way for developers to work with browser tools. It allows
developers to speed up the task of styling elements.
Using keyboard shortcuts for each element you
can bookmark your navigation.
We’ve all experienced the difficulty in
inspecting highly detailed elements, and it’s easy to get lost.
DOM Flags enable you to track styling elements
includes a feature to inspect components with accuracy automatically. This, in
turn, will help speed up DevTools workflow and implementation.
DOM Flags enables you to track changes. And
maintain your focus on the elements you’re working with.
2. Sizzy
Sizzy gives designers and developers a simple
way to test their sites in multiple viewports.
Sizzy provides a simple way to check your
design in real-time. It offers an interactive view of any number of devices and
screen sizes. You can even simulate a device keyboard and then switch between
landscape and portrait modes.
Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.
Sizzy is an open source project, and you can see the entire code here.
3. Checkbot
Checkbot can test your site for security
issues and also audit your website page loading speed. It will provide
designers with a means of identifying typical errors and recommend improvements
in site security, search engine, and site speed.
Using more than 50 best practice metrics, it
will audit a website for best practice SEO, broken links, duplicate content and
more. The tool will also validate CSS, JS, and HTML.
Checkbot picks up on designer and coder errors
in real time saving you the trouble of having to go back and recheck your work
repeatedly.
If you’re looking for a good quality tool that
will fix broken page links, ensure unique content and page titles and eliminate
redirect chains this tool would be useful.
For designers, it can help you minimize your
CSS and JS as well as provide recommendations on how to minify your CSS and
leverage browser caching.
4. GistBox Clipper
GistBox is one of the most helpful Chrome
extensions for web designers.
GistBox can create a GitHub Gist from any code block on the webpage you are viewing.
At the top right-hand corner of any code
block, you’ll see a small button, which when pressed, will allow a pop-up that
enables you to save the code to the Gist.
You can create new Gists with a right mouse
click and save blocks of code for later inspection and use.
Integrating with GitHub enables designers and
developers to collect code blocks and manipulate them or categorize them for
later use. This makes it a convenient and efficient Chrome extension tool.
5. ColorZilla
ColorZilla Is an incredibly useful Chrome
extension for gathering hex codes which can be tagged, labeled and categorized
for individual web design projects.
It enables you to select an eye-dropper tool
that will extract the color from any web page and save it to the ColorZilla
clipboard.
With it, you can quickly develop color
palettes for later use and as a way of ensuring you are using color
consistently in web design and development.
ColorZilla also acts as a color analyzer and
CSS gradient editor so that you can convert an image to CSS.
6. WhatFont
This
Chrome Extension is a real time-saver for those wanting to utilize their
favorite fonts And incorporate them into
their own web design project.
WhatFont Chrome extension allows developers to
quickly analyze and identify almost any font on any web page.
The extension is well developed and rather
than having to open up inspection tools the extension works by merely waving
the mouse over the font.
Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.
7. LightShot
LightShot is a quick screenshot tool that
enables you to capture the entire, or part of any page and either upload it or
download it or send it to a third party destination.
Screenshots taken by LightShot can be used and
shared on social media or printed.
You can annotate and add text, arrows and more
to the selected portion of the screen. But perhaps one of the most brilliant
features of this simple tool for web designers is that by selecting an image
you can then proceed to do a full Google image search for similar images
online.
LightShot can be configured in multiple
languages.
The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.
8. Awesome Screenshot
Like Lightshot, Awesome Screenshot is a screen
and image capturing extension.
It does differ from Lightshot, however, in a
number of ways. Awesome Screenshot can be configured to connect all your
screenshots with your Google drive.
It allows you to screenshot those elements
which are beyond your view in order to capture the entire page. It has
additional editing and annotation tools comma allows for cropping and image
editing all within the extension.. or with the use of additional Awesome
Screenshot applications
You can extend its features by installing the
Chrome application for desktop as well. The extension also allows for video
capturing and sharing so that you can collaborate with other developers or
designers when working on any site.
You can add additional images to a screenshot
as well as blue or erase elements that you would rather not show to others.
9. Clear Cache
The Clear Cache Chrome Extension Is a fast and
simple tool that enables you to clear cookies and cache of the page you’re
looking at. It removes the need to navigate to the settings page of your
browser in order to clear a few simple page elements.
For web designers who are making multiple
edits and want to view them in real time, this is an excellent tool that will
eliminate much of the frustration of looking at old data.
There are times you need to clear your cache
and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you
erase your cache as well as global or local cookies at the click of a button.
Clear Cache will allow you to configure which
elements you want to clear from the page. Variables include Cash, downloads,
all systems, form-data, at Cash, index database, plugin data, passwords and
more.
10. Web Developer Google Chrome
Extension
The Web Developer Google Chrome Extension
allows developers and designers to easily audit, analyze and check their web
pages for any violations of best practice design, coding, usability, and search
engine optimization.
It’s a great all-in-one tool that is not heavy
on browse our resources yet provides a ton of information useful to web design
is also responsible for search engine optimization elements within a website or
page.
The
extension installs the toolbar with multiple web developer tools.
The tool will give you indications on page
size, width, and dimensions which make conflict with best practice use on
multiple devices. It allows you to check embedded JavaScript and view your
website through a simulation of various devices.
The extension functions well on Windows, Linux
and Mac OS. In addition to coding and design issues, it will also provide
insights into meta tag information, response headers, color information, and
topographic information.
You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.
No doubt there are a plethora of other high
quality and useful Chrome extensions that are web designer or developer could
use.
This list showcases a few of the most popular
and useful tools. Do you have any recommendations for tools which you think I’m
more useful or superior to the ones in this list? Let us know.
