Install Chrome OS On Your Laptop / PC Access Google Play and Linux on Chrome!
차례:
Chrome은 고급 기능으로 인해 웹 개발에 널리 사용되는 웹 브라우저 중 하나입니다. Chrome 개발자 도구 는 디버깅하는 동안 매우 유용합니다. 우리 대부분은 Chrome 개발자 도구를 사용하여 실제 CSS를 편집 할 수 있음을 이미 알고 있지만 오늘 알려 드릴 정보가 더 많습니다.
Chrome 개발 도구 도움말
Chrome Dev의 알려지지 않은 숨겨진 트릭이 많이 있습니다. 도구와 우리는 그들 가운데 가장 유용한 트릭을 조사 할 것입니다. Chrome에서 개발자 도구를 열려면 키보드에서 F12 를 누르고 다음 트릭을 시도해보십시오.
1. 모든 파일 찾기 및 열기
웹 개발을 할 때 많은 HTML, CSS, JS 및 기타 파일을 처리합니다. 우리가 무엇이든 디버깅하고 싶을 때 Chrome Dev 도구를 엽니 다. 특정 파일을 신속하게 검색하고 찾을 수 있으므로 작업을 쉽게 수행 할 수 있습니다. Ctrl + P 를 누르고 파일 이름을 입력하십시오. 이렇게하면 파일 목록에서 특정 파일을 찾을 수 있습니다.
2. 원본 파일 내에서 검색
이전 트릭에서는 특정 파일을 검색하는 방법을 알게되었습니다. 로드 된 모든 파일에서 특정 문자열을 검색 할 수도 있습니다. 파일에서 문자열을 검색하려면 Ctrl + Shift + F 를 누르십시오. 정규 표현식도 지원합니다.
3. 특정 줄로 이동
소스 파일을 열고 특정 줄로 이동하려면 Ctrl + G 를 누르고 줄 번호를 입력하고 Enter 키를 누르십시오.
4. 콘솔 탭에서 DOM 요소 선택
Dev Tools를 사용하여 콘솔에서 요소를 선택할 수도 있습니다.
- $ () - 일치하는 CSS 선택기의 첫 항목을 반환합니다.
- $$ () - 주어진 CSS 선택기와 일치하는 요소의 배열을 반환합니다.
더 많은 콘솔 명령을 보려면이 게시물로 넘어가십시오.
5. 여러 캐럿 사용하기
여러 곳에서 여러 개의 캐럿을 설정하려는 경우 Ctrl 키를 누른 상태에서 원하는 위치를 클릭하여 Chrome Dev 도구에서 쉽게 설정할 수 있습니다. 그런 다음 글쓰기를 시작하면 선택한 여러 장소에 배치되는 것을 볼 수 있습니다.
6. 로그 보존
로그 보존은 페이지가로드 된 경우에도 로그를 유지하는 데 도움이됩니다. 콘솔 로그에서 로그 보존 항목 옆의 옵션을 선택하면 로그가 보존됩니다. 이것은 페이지가로드되기 전에 로그를 보여주고 버그를 조사하는 데 도움이됩니다.
7. 내장 된 코드 미적 도구 사용
Chrome Dev Tools에는 pretty print "{}"라는 코드 미화가 내장되어 있습니다. 개발자 도구는 최소화 된 코드를 보여 주므로 읽기가 쉽지 않습니다. 사람이 읽을 수있는 형식으로 소스 파일을 표시하려면 열린 소스 파일의 왼쪽 하단에 표시된 예쁜 인쇄 버튼을 클릭하십시오.
8. 웹 사이트가 모바일 환경에 적합합니까? 확인하십시오.
Chrome Dev Tools를 통해 웹 사이트가 모바일 친화적인지 여부를 확인할 수 있습니다. 웹 사이트가 다양한 기기에서 어떻게 보이는지 확인할 수 있습니다. Chrome Dev 도구로 이동하여 에뮬레이션 탭 아래에서 다양한 기기를 제출할 수 있습니다. 원하는 장치를 선택하고 해당 장치에서 웹 사이트가 어떻게 보이는지 테스트하십시오.
자세한 내용은 다음 비디오를 참조하십시오.
9. 센서 및 지리적 위치 에뮬레이션
터치 스크린 및 가속도계와 같은 센서를 에뮬레이션 할 수도 있습니다. 지리적 위치를 에뮬레이션 할 수도 있습니다. 이를 수행하려면 에뮬레이션 -> 센서로 넘어갑니다.
10. 현재 단어의 다음 항목 선택
단어를 모두 바꾸려면 해당 단어를 선택하고 Ctrl + D 를 눌러 선택한 단어의 다음 항목을 선택하십시오. 한 번에 모든 단어를 편집 할 수 있습니다.
11. 색상 형식 변경
rgba, 16 진수 및 hsl 형식 중 변경 사항을 변경하려면 색상 미리보기에서 Shift + 클릭 을 사용하십시오.
12. 작업 공간을 통해 로컬 파일에 변경 사항 추가
Google은 소스 파일을 편집하고 CSS, Java Script 및 Chrome Dev 도구의 다른 파일을 일부 변경할 수 있습니다. 이러한 변경 사항을 로컬 파일에 추가하려면 작업 영역의 변경 사항을 디스크의 파일에 복사하여 복사 할 필요가 없습니다. Chrome 개발자 도구를 사용하면 개발자 도구에서 변경 한 내용으로 파일을 비교하고 로컬 파일을 업데이트 할 수 있습니다. 이 작업을 수행하려면 소스 탭의 왼쪽에있는 소스 파일을 마우스 오른쪽 버튼으로 클릭하고 작업 영역에 폴더 추가
를 선택하십시오.
사무실에서 유용한 다섯 가지 유용한 IPhone 응용 프로그램
사무실에서 멀리 떨어진 곳에서 IPhone을 사용하면이 다섯 가지 도구로 생산성을 높일 수 있습니다.
가장 유용한 10 개의 가장 유용한 Windows 7 키보드 단축키
Windows 7에서 사용할 수있는 매우 유용한 10 개의 키보드 단축키 목록 키보드 단축키 또는 단축키를 사용하는 것을 귀찮게하지 않는 사람들이 있습니다. 그런 다음 키보드 단축키 나 단축키를 사용하지 않고 그냥 할 수없는 사람들이 있습니다. 실제로 사용하지 않는 사람들을 위해 시도해보아야합니다. Windows 7의 10 가지 가장 유용한 키보드 단축키로 시작할 수 있습니다. 사용하지 않으면 키보드 단축키를 잊어 버릴 수 있으므로 일단이 글을 골라 쓰면 사용을 시도하십시오 - 훨씬 빨리 수행하고 있음을 알 수 있습니다 Windows 7의 유용한 키보드 바로 가기
5 가지 최고의 Windows 8 응용 프로그램 Windows 9에 유용한 유용한 Windows Store 응용 프로그램 목록은 Disk Falcon, Skype, Epicurious, Perfect 365 and Kindle.
필자는 며칠 전 새로운 Sony Vaio E Series 노트북을 구입했으며 Windows 8이 사전 탑재되어 제공되었습니다. 기술 필자로서 저는 Windows 8에 대한 많은 기사를 작성하여 기능이 매우 혼란스러워 보였습니다. 처음에는 나에게 까다로운 일이었고 이것이 내가 그 일에 찬성하지 않았던 이유였습니다. 내 노트북에 미리 장착되어 있기 때문에 시험해보기로했습니다. 그러나 Windows 8을 며칠 동안 사용해 본 결과, 시작 메뉴 대신 시작 화면을 사용하는 것이 조금 혼란 스럽지만 실제로는 매우 흥미 롭습니다.