15 개 개발 자가 알 아야 할 chrome 기술

웹 개발 자 중 Google Chrome 은 가장 광범 위 하 게 사용 되 는 브 라 우 저 입 니 다.6.일주일 에 한 번 의 발표 주기 와 강력 한 개발 기능 을 계속 확대 하여 웹 개발 자 에 게 필수 적 인 도구 가 되 었 다.console 과 debugger 를 사용 하여 온라인 으로 CSS 를 편집 하 는 등 일부 기능 에 익숙 해 졌 을 수도 있 습 니 다.이 글 에서 우 리 는 개발 절 차 를 개선 하 는 데 도움 이 되 는 15 가지 기 교 를 공유 할 것 이다.

1.빠 른 파일 전환
sublime text 를 사용 한 적 이 있다 면 Go to anything 이라는 기능 을 덮어 쓰 지 않 는 것 에 익숙 하지 않 을 것 입 니 다.chrome 개발 자 기능 에 도 이 기능 이 있다 는 것 을 들 으 면 기 쁠 것 입 니 다.개발 자 도구 가 열 렸 을 때Ctrl+Pcmd+pon mac)를 누 르 면 프로젝트 의 파일 을 빠르게 찾 고 열 수 있 습 니 다.

2.소스 코드 에서 검색
원본 코드 에서 검색 하고 싶 으 면 어떻게 하 시 겠 습 니까?페이지 에 불 러 온 파일 에서 특정한 문자열 을 찾 습 니 다.단축 키 는Ctrl + Shift + F(Cmd+Opt+F)입 니 다.이 검색 방식 은 정규 표현 식 도 지원 합 니 다.

3.지 정 된 줄 로 빠르게 이동
Sources 탭 에서 파일 을 열 고 윈도 와 리 눅 스에 서Ctrl + G,(or Cmd+L for Mac)을 누 른 다음 줄 번 호 를 입력 하면 개발 자 도구 가 파일 의 임의의 줄 로 이동 할 수 있 습 니 다.

다른 방법 은 Ctrl+O 를 누 르 고 파일 을 찾 지 않 고:줄 수 를 입력 하 는 것 이다.
4.콘 솔 에서 요 소 를 선택 합 니 다.
DevTools 콘 솔 은 DOM 요 소 를 선택 하기 위해 변수 와 함 수 를 지원 합 니 다.
$()Cdocument.query Selector()의 약자 로 css 선택 기와 일치 하 는 첫 번 째 요 소 를 되 돌려 줍 니 다.예 를 들 어$('div')는 이 페이지 의 첫 번 째 div 요 소 를 되 돌려 줍 니 다.
$$()Cdocument.query Selector All()의 약자 로 css 선택 기와 일치 하 는 요소 배열 을 되 돌려 줍 니 다.
$0-$4C 는 최근 요소 패 널 에서 선택 한 DOM 요소 의 역사 기록 다섯 개 를 차례대로 되 돌려 줍 니 다.$0최신 기록 입 니 다.

더 많은 콘 솔 명령 을 알 고 싶 으 면 여기에 찔러 라:Command Line API
5.여러 개의 삽입 부 호 를 사용 하여 선택
파일 을 편집 할 때Ctrl(cmd for mac)를 누 르 고 편집 할 곳 에서 마 우 스 를 누 르 면 여러 개의 삽입 부 호 를 설정 할 수 있 습 니 다.한 번 에 여러 곳 에서 편집 할 수 있 습 니 다.

6.기록 저장
콘 솔 탭 에 저 장 된 기록 옵션 을 선택 하면 개발 자 도구 의 콘 솔 이 모든 페이지 에 기록 을 불 러 온 후에 기록 을 지우 지 않 고 계속 저장 할 수 있 습 니 다.페이지 가 불 러 오기 전에 나타 난 bug 를 연구 하고 싶 을 때 편리 한 방법 이 될 것 입 니 다.

7.양질 의 인쇄
Chrome's Developer Tools 는 내 장 된 미화 코드 가 있어 최소 화 되 고 읽 기 쉬 운 코드 를 되 돌려 줍 니 다.Pretty Print 단 추 는 Sources 태그 의 왼쪽 아래 에 있 습 니 다.

8.설비 모델
모 바 일 우호 페이지 를 개발 하 는 데 있어 DevTools 는 매우 강력 한 모델 을 포함 하고 있다.이 구 글 영상 은 화면 크기 조정,터치 시 뮬 레이 션 과 모 의 나 쁜 네트워크 연결 등 주요 특징 을 소개 했다.
(ps:원문 에서 이 동 영상 파일 을 잃 어 버 렸 습 니 다.이 그림 은 작은 편집 보충 입 니 다.이 도 구 를 직접 테스트 할 수 있 습 니 다.유용 합 니 다)

9.설비 센서 시 뮬 레이 션
장치 모드 의 또 다른 멋 진 기능 은 모 바 일 장치 의 센서,예 를 들 어 터치 스크린 과 가속 계 를 모 의 하 는 것 이다.너 는 심지어 너의 지리 적 위 치 를 악 용 할 수도 있다.이 기능 은 요소 탭 의 아래쪽 에 있 습 니 다."show drawer"단 추 를 누 르 면 볼 수 있 습 니 다Emulation --> Sensors.

색상 선택 기
스타일 편집 에서 색상 속성 을 선택 하면 색상 미리 보 기 를 누 르 면 색상 선택 기 가 팝 업 됩 니 다.선택 기 가 열 렸 을 때 페이지 에 머 물 렀 을 때 마우스 포인 터 는 돋보기 가 되 어 픽 셀 정밀도 의 색 을 선택 할 수 있 습 니 다.

11.요소 상 태 를 강제로 변경 합 니 다.
DevTools 는 CSS 상 태 를 모 의 할 수 있 는 기능 이 있 습 니 다.예 를 들 어 요소 의 hover 와 focus 는 요소 스타일 을 쉽게 바 꿀 수 있 습 니 다.CSS 편집기 에서 이 기능 을 사용 할 수 있 습 니 다.

12.시각 화 된 DOM 그림자
웹 브 라 우 저 는 텍스트 상자,단추,입력 상자 와 같은 요 소 를 구축 할 때 다른 기본 요소 의 보 기 는 숨겨 져 있 습 니 다.하지만 당신 은Settings -> General 요소 탭 에 숨겨 진 코드 가 표 시 됩 니 다.심지어 그들의 스타일 을 단독으로 디자인 할 수 있어 서 당신 에 게 큰 통제 권 을 주 었 습 니 다.

13.다음 일치 하 는 항목 선택
Sources 탭 에서 파일 을 편집 할 때 Ctrl+D(Cmd+D)를 누 르 면 현재 선 택 된 단어의 다음 일치 도 선 택 됩 니 다.동시에 편집 할 수 있 습 니 다.

14.색상 형식 변경
색상 미리 보기 기능 에서 단축 키 Shift+Click 을 사용 하면 rgba,hsl,hexadecimal 에서 색상 형식 을 바 꿀 수 있 습 니 다.

15.워 크 스페이스 를 통 해 로 컬 파일 편집
    Workspace 는 Chrome 개발 자 도구 의 강력 한 기능 으로 개발 자 도 구 를 진정한 IDE 로 만 들 었 습 니 다.Workspace 는 Sources 옵션 에 있 는 파일 을 로 컬 프로젝트 의 파일 과 일치 시 키 기 때문에 외부 에서 변 경 된 파일 을 편집기 에 복사 하거나 붙 이지 않 고 직접 편집 하고 저장 할 수 있 습 니 다.
Workspace 를 설정 하기 위해 서 는 Sources 옵션 을 열 고 왼쪽 판 넬 의 어느 곳 이 든 오른쪽 클릭 하여 Add Folder To Worskpace 를 선택 하거나 프로젝트 폴 더 전 체 를 Developer Tool 에 끌 어 다 놓 으 십시오.현재 어느 폴 더 에서 든 선택 한 폴 더 는 하위 디 렉 터 리 와 모든 파일 을 포함 하여 편집 할 수 있 습 니 다.Workspace 를 더욱 효율적으로 하기 위해 서 는 페이지 에 사용 되 는 파일 을 해당 폴 더 에 비 추어 온라인 편집 과 간단 한 저장 을 허용 할 수 있 습 니 다.