Chrome은 최근 인터넷 브라우저 시장의 25%를 점유하여 Internet Explorer(Project Spartan으로 발전하고 있음)에 이어 세계에서 두 번째로 많이 사용되는 브라우저가 되었습니다. 궁극적으로 이는 Chrome이 사실상 웹 개발자를 위한 홈
나는 Firefox를 선호하지만 사람들이 Chrome을 좋아하는 이유를 이해할 수 있습니다. 브라우저 벤치마크를 지배하는 경향이 있으며 일반 사용자가 Chrome 고급 사용자가 되기 쉽습니다. 다른 사람들은 실제로 Chrome을 싫어하지만 특정 확장 프로그램을 사용할 수 있기 때문에 사용이 멈춥니다.
Chrome이 웹 개발자에게 좋은 이유 중 하나는 Chrome 웹 스토어와 확장 프로그램입니다. 웹사이트를 디자인하거나 코딩할 계획이 있다면 바로 설치해야 하는 몇 가지 필수 도구입니다.
컬러질라
컬러질라 Firefox 애드온으로 시작했지만 많은 사람들이 Chrome 버전을 요청할 정도로 인기를 얻었습니다. 이제 여기 있습니다. 이 편리한 확장 프로그램은 기본적으로 Paint 또는 Photoshop과 같은 프로그램에서 찾을 수 있는 스포이드 도구의 고급 버전입니다.
이를 통해 브라우저의 아무 지점이나 가리키고 해당 지점의 색상 정보를 즉시 가져올 수 있습니다. 일단 잡아당기면 클립보드에 복사하기 전에 RGB, HSV 또는 직선 16진수로 조정할 수 있습니다. 사용이 매우 간편합니다.
또한 CSS Gradient Generator, 웹페이지 색상 분석기 및 사용자의 편의를 위해 미리 설치된 몇 가지 색상 팔레트가 함께 제공됩니다.
창 크기 조정
웹 개발자의 위험 중 하나는 웹 사이트의 보기 경험이 모든 종류의 장치에서 사용자에게 즐거운지 확인하는 것입니다. 우리는 모바일과 데스크톱에 대해서만 이야기하는 것이 아닙니다. 중요하지만 소형 태블릿과 대형 모니터의 차이점도 있습니다.
창 크기 조정 즉석에서 브라우저 창의 크기를 조정하는 쉬운 방법입니다. 버튼을 클릭하면 웹사이트를 다양한 해상도로 테스트하여 사용자에게 표시되는 내용을 확인한 다음 그에 따라 조정할 수 있습니다.
IE 탭
웹 개발자의 또 다른 큰 위험은 브라우저 표준(또는 표준 부족)입니다. Internet Explorer, Firefox, Chrome, Opera 및 기타 모든 마이너 브라우저는 웹사이트를 약간 다른 방식으로 렌더링합니다. 한편, 일부 브라우저는 다른 브라우저보다 표준 채택 속도가 느립니다.
또는 Internet Explorer의 경우 표준이 창 밖으로 던져지고 웹 개발자는 조정을 강요당하면서 머리카락을 찢을 수밖에 없습니다.
IE 탭 사용 , 이 과정이 조금 더 쉬워졌습니다. 새 Chrome 탭에서 웹사이트를 볼 수 있지만 IE에 표시되는 대로 렌더링됩니다. IE 문제에 대한 혁신적인 솔루션은 아니지만 적어도 문제가 있습니다.
유효성
모든 HTML 코드가 같지는 않습니다. 브라우저는 표준 준수에서 큰 역할을 하지만 일부 책임은 좋은 HTML 관행을 따라야 하는 웹 개발자에게도 있습니다. 그렇기 때문에 HTML을 테스트하고 검증하기 위한 도구가 있습니다.
유효성 타사 사이트를 방문하지 않고도 이 모든 작업을 수행할 수 있는 확장 프로그램입니다. 웹사이트를 열고 버튼을 클릭하기만 하면 브라우저 콘솔에 잘못된 HTML 메시지가 모두 표시됩니다. 검증은 W3C 검증 서비스를 통해 이루어집니다.
내장
웹 개발에 대해 내가 싫어하는 한 가지는 너무나 사용할 수 있는 라이브러리, 프레임워크 및 엔진. 선택의 자유는 훌륭하지만 기술의 수가 너무 많아 모든 기술을 따라잡을 수 없을 때 고통스럽습니다.
웹사이트를 방문하여 기본 기술이 무엇인지 궁금해 한 적이 있습니까?
기본 제공 확장 프로그램은 현재 웹페이지를 분석하여 전체를 확인하는 단일 버튼입니다. 광고 네트워크, 콘텐츠 배포 플랫폼, 심지어 그 배후에 있는 호스팅 소프트웨어를 포함하여 이를 구동하는 웹 라이브러리, 프레임워크 및 엔진의 총체입니다.
우편 배달부 REST 클라이언트 [더 이상 사용할 수 없음]
REST API를 사용하는 경우 Postman 능률적인 워크플로에 필요한 하나의 도구입니다. 이를 통해 HTTP 요청을 구성하고 JSON 및 XML 형식의 응답을 얻을 수 있습니다. 응답은 HTML로 별도의 창에서 열립니다.
여러 요청을 컬렉션이라고 하는 것으로 그룹화할 수도 있습니다. 이는 조직적이고 효율적으로 유지하는 좋은 방법입니다. 확장 프로그램 내에서 바로 환경 변수를 전환하여 여러 환경에서 테스트할 수도 있습니다.
기업 입섬
채우기 텍스트를 생성하는 한 가지 방법은 "asdf"를 100번을 반복해서 복사하여 붙여넣는 것입니다. 더 나은 방법은 Corporate Ipsum을 설치하는 것입니다. 그리고 눈 깜짝할 사이에 채우기 텍스트를 생성할 수 있습니다.
이전에 여러 Lorem Ipsum 생성기를 다루었지만 Corporate Ipsum의 매력은 브라우저에 바로 설치된다는 것입니다. 버튼 클릭 한번으로 끌어올릴 수 있습니다. 라고 묻는다면 사용하지 않을 이유가 없습니다. 이제 실제로 웹사이트 코딩으로 돌아갈 수 있습니다!
탭클라우드
웹 개발은 때때로 여러 시스템에서 발생합니다. 개발자를 위한 소스 제어는 동기화 및 최신 상태를 유지하는 주요 방법이지만 컴퓨터 간에 여러 탭을 전송하려는 경우 어떻게 해야 합니까? 바로 TabCloud입니다. 들어옵니다.
TabCloud는 탭을 클라우드에 동기화하여 다른 곳에서 다시 열 수 있습니다. 또한 로컬에서 세션 보호기로 사용할 수 있으므로 나중에 다시 방문할 수 있도록 탭 집합을 저장할 수 있습니다. 탭은 Google 계정에 저장됩니다.
WhatFont
글꼴 디자인은 웹 개발의 큰 구성 요소이므로 Google Web Fonts와 같은 서비스가 인기를 얻고 있습니다. 좋은 소식은 이러한 무료 글꼴이 현재 사용 가능한 가장 아름다운 웹 글꼴 중 일부라는 것입니다.
그러나 인정하십시오. 웹을 탐색하다가 전에 본 적이 없는 멋진 글꼴을 발견할 때가 있습니다. 식별하는 방법은 여러 가지가 있지만 가장 빠른 방법은 WhatFont를 사용하는 것입니다. . 이를 사용하면 글꼴 위로 마우스를 가져가면 간단히 글꼴을 검사할 수 있습니다. . 이보다 더 쉬울 수 있습니까?
멋진 스크린샷 [더 이상 사용할 수 없음]
스크린샷이 일반적인 웹 개발 루틴의 일부가 아닌 경우 Awesome Screenshot 그것을 바꾸는 데 도움이 될 것입니다. 화면 캡처는 설계 변경 사항을 문서화하고 진행 중인 작업을 클라이언트 또는 팀 구성원과 공유하는 데 유용합니다.
이 확장에는 전체 페이지, 선택 영역 또는 가시 영역을 포함한 여러 캡처 기능이 있습니다. 또한 주석을 추가하고 이미지의 민감한 부분을 흐리게 처리하고 클릭 한 번으로 공유할 수 있습니다. 또는 대신 Google 드라이브에 업로드하세요.
개념이 흥미롭지만 더 강력한 데스크톱 프로그램을 사용하고 싶다면 이 스크린샷 도구 비교를 확인하고 가장 적합한 도구를 사용하십시오.
내 링크 확인
많은 웹 개발 오류는 방문자를 좌절시킬 것이며 깨진 링크는 최악의 범죄자 중 하나입니다. 깨진 링크 하나는 괜찮을 수 있지만 그 이상이면 웹 사이트의 신뢰성과 평판이 떨어지기 시작합니다. 다행히도 이것은 쉽게 피할 수 있는 실수입니다.
내 링크 확인 약속한 대로 정확하게 수행합니다. 링크를 확인합니다. 유효한 링크는 녹색으로 표시되고 끊어진 링크는 빨간색으로 표시되며 끝에는 백분율 점수가 표시됩니다. 나중에 해야 할 일은 링크를 복구하기만 하면 됩니다!
어떤 확장 프로그램을 사용하십니까?
생산성을 위한 또 하나의 확장 프로그램은 StayFocusd입니다. 웹 개발 확장이라기보다는 범용 확장에 가깝지만 상관없이 확실히 유용합니다. 작업하는 동안 웹으로 인해 주의가 산만해지는 것을 방지합니다!
이것들에 대해 어떻게 생각하세요? 추천하고 싶은 다른 필수 웹 개발 확장 프로그램이 있습니까? 아래 댓글로 공유해 주세요!