웹 디자이너와 개발자를위한 30 가지 Chrome 확장 프로그램

작가: Monica Porter
창조 날짜: 17 3 월 2021
업데이트 날짜: 17 할 수있다 2024
Anonim
10 Chrome Extensions for Developers
동영상: 10 Chrome Extensions for Developers

콘텐츠

Chrome의 개발 도구는 훌륭하지만 인터넷 브라우저에 훨씬 더 흥미로운 기능을 추가하여 웹 디자인과 개발을 더 쉽게 할 수 있습니다.

물론 속도를 높이기위한 수많은 다른 도구가 있습니다. 우리가 가장 좋아하는 웹 디자인 도구 게시물을 참조하세요. 하지만 지금은 웹 디자이너와 개발자를위한 Chrome 확장 프로그램 30 개가 있습니다.

01. Gmail 단순화

Gmail이 자신의 이익을 위해 너무 지저분 해지는 경우, 지난 몇 년 동안 Gmail에 포함 된 모든 파편과 잘못된 UI 결정을 제거하는 Simplify Gmail에 인사하세요. Gmail의 전 수석 디자이너 인 Michael Leggett가 만든이 앱은 산만 한 혼란을 없애고 더욱 깔끔하고 기능적인 버전을 제공합니다.

02. 스펙트럼


어떤 종류의 색맹은 전 세계적으로 약 2 억 명의 사람들에게 영향을 미칩니다. 그러나 그들을위한 색맹은 디자이너의 접근성 체크리스트에서 종종 부족합니다. 하지만 Spectrum을 사용하면 다양한 유형의 색각 결함에 대해 사이트를 빠르게 테스트하고 모든 것이 명확한 지 확인할 수 있습니다.

03. CSS 스캔 2.0

Chrome의 개발자 도구는 보닛 아래에서 사이트가 어떻게 작동하는지 확인하는 편리한 방법이지만,보고 싶은 CSS 인 경우 CSS Scan 2.0이 훨씬 더 쉽습니다. 요소 위로 마우스를 가져 가면 해당 CSS가 팝업보기에 표시되어 클릭 한 번으로 규칙을 복사 할 수 있습니다. 이를 사용하여 테마 또는 템플릿에서 특정 요소를 복사하여 자신의 용도에 맞게 조정할 수 있으며 자체 코드를 디버깅하는 데 적합합니다.

04. 아미노


또 다른 훌륭한 CSS 도구가 있습니다. Amino는 브라우저에서 스타일 시트를 생성하고이를 웹 사이트에 실시간으로 적용 할 수있는 라이브 CSS 편집기입니다. 방문하는 모든 사이트의 디자인을 영구적으로 변경할 수 있으며, Google 계정으로 Chrome에 로그인 한 경우 스타일 시트가 동기화되어 모든 데스크톱 기기의 Chrome에서 액세스 할 수 있습니다.

05. 시지

반응 형 웹 디자인은 요즘 당연한 일이며 여러 뷰포트에서 디자인을 확인하는 간단한 방법을 원합니다. Sizzy는 볼만한 가치가 있습니다. 다양한 기기 화면 크기에서 렌더링 된 페이지의 대화 형보기가 표시되며 시뮬레이션 된 기기 키보드를 표시하거나 숨기고 세로 모드와 가로 모드간에 전환 할 수 있습니다.

06. 사이트 팔레트


다음에 색상을 잘 활용하는 사이트를 발견하면 다음과 같이 간단하게 활용할 수 있습니다. 사이트 팔레트는 웹 사이트에서 기본 색상을 추출하고 공동 작업자에게 쉽게 보여줄 수있는 공유 가능한 팔레트를 생성합니다. Sketch 템플릿을 다운로드 할 수도 있으며 Adobe Swatch도 지원됩니다.

07. 체크 봇

사이트의 모든 링크가 실제로 작동하는지 확인하는 것은 즉각적인 유용성이며 SEO를 개선하는 좋은 방법이기도합니다. Checkbot은 끊어진 링크, 중복 제목, 리디렉션 체인, 잘못된 HTML / JS / CSS 등을 확인하는 Chrome 확장 프로그램이므로 사이트에서 잘못된 링크를 빠르게 감사하고 수정할 수 있습니다.

08. 토비

Chrome을 몇 시간 동안 열어두면 새끼 손가락 너비만큼 혼란스러운 탭의 둥지가 될 것이라는 사실은 널리 알려져 있습니다. Toby는 그들을 길들일 수있는 좋은 방법입니다. 그것으로 당신은 개별 북마크로드의 대안으로 모든 탭을 링크 모음으로 구성 할 수있어 관리가 훨씬 쉬워집니다.

09. DomFlags

DOM 요소에 대한 키보드 단축키를 만들 수있는 정말 훌륭한 확장 기능인 DomFlags를 사용하여 요소 스타일링 프로세스의 속도를 대폭 향상시킵니다. 마치 DOM을 탐색하기위한 북마크가있는 것과 같습니다. 이것은 DevTools로 작업하는 방식을 바꿀 것입니다.

10. 하이 라이터

다음은 사람들을 토론에 참여시키는 흥미로운 방법입니다. 웹에있는 기사의 하이라이트를 공유 할 수 있으므로 가장 중요한 글에 관심을 끌 수 있습니다.

다음 : 10 개의 추가 Chrome 확장 프로그램

편집자의 선택
10 년의 획기적인 Goodwood 예술 조각상
더 많은 것을 읽으십시오

10 년의 획기적인 Goodwood 예술 조각상

세계에서 가장 큰 모터 링 가든 파티가 연례 페스티벌 오브 스피드 이벤트를 위해 Goodwood에 도착했습니다. 하지만 자동차와 오토바이가 전부는 아닙니다. 이 행사의 가장 큰 논점 중 하나는 그 어느 때보 다 거대한 조각의 중심입니다.매년 12,000 에이커에 달하는 Goodwood 부동산을 관리하는 Earl of March는 자동차 테마를 중심으로 한 ...
Shauna Lynn Panczyszyn 에이전트를 얻는 이점
더 많은 것을 읽으십시오

Shauna Lynn Panczyszyn 에이전트를 얻는 이점

최근에 에이전트를 구할 때인 지 질문하고 에이전트 계약을 해독하는 데 유용한 몇 가지 팁을 제공했습니다. 이제 hauna Lynn Panczy zyn이 Illu tration Ltd에 가입 한 결과 그녀의 경력이 어떻게 더 좋아 졌는지 설명합니다.에이전트를 갖는 것은 제가 정말로 원했던 것이었기 때문에 저는 제가 가장 잘하는 일에 집중할 수 있었고, 계약 ...
적응 형 이미지의 문제점
더 많은 것을 읽으십시오

적응 형 이미지의 문제점

tar Trek의 Jame T Kirk 캐릭터처럼 저는 승리하지 못하는 시나리오를 믿지 않습니다. 반응 형 웹 디자인에서 적응 형 이미지를 제공한다는 아이디어를 발견 할 때까지입니다.적응 형 이미지는 Ethan Marcotte가 이미 시연 한 이미지 크기 조정 문제에 관한 것이 아닙니다 (un toppablerobotninja.com/entry/fluid...