15 프런트 엔드 개발자 용 Firefox의 그래픽 명령 행 (GCLI) 명령
우리가 가진 멋진 버튼과 메뉴가 얼마나 많은지간에, 언제나 감사하는 프로그래머가 있습니다. 명령 줄 액세스 그들의 작업 환경에서, 특히 오른쪽 버튼이나 메뉴 검색을 제거합니다. 우리의 시야에 필요한 설정을 표시하는.
Firefox에는 그래픽 명령 줄 인터프리터, 또는 짧은 GCLI 시간이 지남에 따라 명령을 확장 해 왔습니다. GCLI 명령은 개발자에게 개발 및 구성 도구에 빠르게 액세스. 또한 자동 완성 기능; 어떤 명령을 입력하는 동안 Tab 키를 누르면 GCLI에서 제안한 명령이 입력됩니다..
툴바
파이어 폭스 GCLI 라고도합니다. 개발자 툴바. 있다 세 가지 방법 그것을여십시오 :
- Shift + F2 키보드 단축키 누르기.
- 클릭 “메뉴 열기” 검색 주소창의 오른쪽 끝 (홈 버튼 오른쪽)에있는 (햄버거) 아이콘을 클릭 한 다음 개발자> 개발자 도구 모음 하위 메뉴.
- 상단 메뉴 표시 줄에서 도구> 웹 개발자> 개발자 도구 모음 선택권.
개발자 툴바가 열리면 볼 수 있습니다. 브라우저 창 하단에. 함께 일하기로 결정한 경우 GCLI, 나는 일하는 동안 항상 열려있는 채로 두는 것이 좋습니다..
이제 Firefox에서 수행 할 수있는 유용한 작업을 살펴 보겠습니다. GCLI 사용.
1. 페이지 요소 제거
명령: pagemod 요소 제거
웹 페이지의 레이아웃을 다시 한 번 살펴볼 필요가있을 때 일부 요소가 제거 된 상태, 명령을 입력하십시오. pagemod 요소 제거 페이지에서 해당 요소를 제거하기 위해 Firefox 명령 행에 추가하십시오..
의 가치 .btn, 명령은 다음과 같이 작성됩니다. pagemod 요소 제거 a.btn.
일반적으로 명령 페이지 매드 ~에 사용됩니다. 페이지 수정하기, 선택된 요소 나 속성을 제거하거나 대체함으로써.
2. 요소 측정
명령: 법안
네가 원한다면 측정을 알다. 웹 페이지의 모든 시각적 모듈에 대한 도구가 있습니다. 그만큼 “법안” 도구는 일반적인 웹 개발자 툴셋과 GCLI를 통해 액세스 할 수 있습니다..
입력하고 법안 명령을 명령 행에 넣으면 커서는 십자선으로 변하다. 측정 값은 픽셀로 표시되는 십자형 커서 옆에 있으며 너비, 높이 및 대각선 길이 선택한 영역의 도구를 비활성화하려면, 재방송하다 법안 명령.
3. 신속하게 파일 편집
명령: 편집하다
스타트 페이지의 리소스 수정하기 와 더불어 편집하다 명령. 명령을 입력하는 동안 사용 가능한 모든 리소스의 URI 해당 페이지에서 위쪽 및 아래쪽 화살표 키를 사용하여 탐색 할 수 있습니다. 수정하려는 리소스를 선택했으면 Tab 키를 눌러 제안 사항을 자동 완성하고 Enter 키를 누릅니다. 브라우저의 편집기 도구 선택한 파일과 함께 열립니다..
4. 익숙하지 않은 CSS 속성 찾기
명령: mdn css
이것은 매우 멋진 명령입니다. CSS 속성에 대한 팝업 사전. 익숙하지 않은 CSS 속성을 발견하여 그 의미를 확인하려면 명령을 실행하십시오. mdn css 와 함께 GCLI
팝업이 나타납니다. 와 더불어 “정의” 해당 CSS 속성 툴바 바로 위에 있습니다. 정의는 공식 Mozilla Developer Network (MDN) 페이지에서 발췌 주어진 속성의 MDN의 CSS 속성, HTML 요소 및 웹 API에 대한 용어집이 많이 인용되어 있습니다..
팝업에 표시된 텍스트가 충분하지 않고 더 많은 것을 알고 싶다., 당신은 링크를 클릭 할 수 있습니다. MDN 페이지 방문 팝업 내에서 해당 속성의 해당 MDN 페이지가 열립니다. 현재이 명령은 CSS 속성에서만 사용할 수 있습니다..
5. 페이지 크기 조정
명령: 크기를
크기 조정 도구를 사용하면 페이지 모양을 볼 수 있습니다. 특정 차원으로 크기 조정, 작업중인 것과 다른 크기의 기기에서 페이지의 모양을 미리보고 싶을 때 유용 할 수 있습니다..
Firefox에는 또한 이 도구를 여는 바로 가기 키: Ctrl + Shift + M (Mac의 경우 Cmd + Alt + M). 하지만 이미 네가 정확한 치수를 알아라. 크기 조정에 사용하려면 가장 빠른 방법은 크기를 조정하다 필요한 치수를 가진 명령.
크기는 픽셀 단위로 해석된다.. 명령이 실행되면 크기가 조정 된 페이지가 표시됩니다..
6. 브라우저를 다시 시작하십시오.
명령: 재시작
이 명령은 자명합니다. Firefox를 다시 시작하려면 다음을 입력하십시오. 재시작 명령 줄에 입력하고 Enter 키를 누르면 다시 시작해야하는 추가 기능 또는 플러그인을 설치할 때 편리하게 사용할 수 있습니다.
7. Firefox 프로필 폴더를 엽니 다.
명령: 폴더 openprofile
모든 파이어 폭스 사용자는 자신의 로컬 프로필 폴더 그 사용자 별 파일 저장, 북마크 및 /크롬 폴더. Firefox를 개인 설정할 때이 폴더의 내용을보고 수정해야 할 수도 있습니다.
이 폴더를 여는 다른 방법은 폴더보기 버튼을 클릭하는 것입니다. about : 지원 페이지. 명령을 실행하여 폴더 openprofile Firefox 명령 줄에서 프로필 폴더를 볼 수 있습니다. 한 번에 열어 라..
8. 색상 값 복사
명령: 스포이드
사실 16 진수 형식 만 지원하는 것 외에도 스포이드는 색상 값 복사하기 웹 페이지의 모든 색조를 명령을 입력하십시오. 스포이드 도구의 조작성을 토글하기 위해 GCLI에 추가.
9. 외부 라이브러리 테스트
명령: 주입하다
네가 원한다면 일부 외부 라이브러리 테스트 웹 페이지에서 임시 추가를하기 위해 소스 코드에 뛰어 들지 않고 주입하다 ~에 명령하다 라이브러리 삽입. 예를 들어, jQuery를 포함하려면 jQuery 삽입.
명령을 실행하면 리소스가 페이지로 가져 오기 ~을 삽입하여 >
10. 스크린 샷 찍기
명령: 스크린 샷
그만큼 붙박이 screenshot 복용 도구 Firefox에서 매우 강력합니다. 예를 들어 CSS 선택기를 사용하여 개별 요소를 타겟팅하고, 타이머를 사용하고, dpr. 스크린 샷을 찍을 수도 있습니다. 브라우저의 크롬 부분 만 (사용자 콘텐츠를 둘러싼 영역)을 스크린 샷 - 크롬 명령.
스크린 샷은 폴더 다운로드 브라우저의 PNG 형식.
11. 눈금자를 엽니 다.
명령: 통치자
GCLI를 통해 쉽게 액세스 할 수있는 Firefox의 멋진 도구입니다. 그만큼 통치자 명령 가로 및 세로 눈금자 표시 페이지 주위에. 눈금자의 측정 값은 다음과 같습니다. 픽셀 단위. 눈금자를 비활성화하려면 동일한 명령을 실행하십시오..
12. 콘솔 & 디버거 열기
명령: 콘솔 열림 과 dbg 오픈
키보드가 단락 된 경우 웹 콘솔 또는 디버거 도구 열기 너의 마음을 미끄러 뜨렸다, 걱정하지 마라, 단순한 명령을 타이프해라. 콘솔 열림 또는 dbg 오픈 파이어 폭스 명령 행에 각 도구를 열려면.
13. 페이지 요소 계산
명령: qsa
GCLI의이 멋진 명령은 웹 페이지에서 요소를 빠르게 검색합니다. 주어진 CSS 선택기와 일치. 예를 들어, 모든 페이지의 요소를 사용하려면 qsa a 명령.
14. 애드온을 활성화 또는 비활성화합니다.
명령: 애드온 목록
Firefox 부가 기능을 조사하고 관리해야하는 경우 부가 기능 메뉴가 아닌 GCLI 명령을 사용하십시오. GCLI 버전은 모든 부가 기능과 플러그인을 나열하기 때문에, 사전 설치된 것을 포함하여, 추가 기능 메뉴에 표시되지 않을 수 있습니다..
명령을 사용하여 GCLI의 애드온 상태를 토글 할 수 있습니다. 애드온 해당 하위 명령 다음에 가능하게하다 또는 무능하게하다.
아래의 데모에서 볼 수 있습니다. Pocket을 신속하게 비활성화하는 방법 Firefox에서.
15. 설정 관리
명령: 프리 쇼
톤이 많다. 사용자 정의 설정 사용자는 Firefox의 about : config 페이지. 동일한 설정은 GCLI를 사용하여 보거나 수정할 수 있습니다..
GCLI를 사용하여 맞춤 설정에 액세스하기 더 빠른 옵션 보거나 변경할 구성을 이미 알고있는 경우 에 설정 값을 설정하십시오., 사용 프리 세트 명령 및 설정 재설정, 유형 프리프 리셋 .
아래의 데모에서 URI를 확인하십시오. 그만큼 jQuery 삽입 명령이 페이지에 삽입되었습니다 (이 기사의 9 번 섹션 참조).
