Google 크롬^{(Google Chrome)} 은 고급 기능으로 인해 웹 개발에 널리 사용되는 웹 브라우저 중 하나입니다. Chrome 개발자 도구^{(Chrome Developer Tools)} 는 디버깅하는 동안 매우 유용할 수 있습니다. 우리 대부분은 이미 Chrome 개발자 도구^{(Chrome Dev Tools)} 를 사용하여 라이브 CSS 를 편집할 수 있다는 것을 알고 있지만 오늘 공유할 더 많은 팁이 있습니다.

Chrome 개발 도구 도움말

Chrome Dev Tools 에는 알려지지 않은 숨겨진 트릭이 많이 있으며 그 중 가장 유용한 트릭을 살펴보겠습니다. Chrome 에서 개발자 도구를 열려면 키보드에서 F12 를 누르고 다음 트릭을 시도하십시오.

1. 파일 찾기 및 열기

웹 개발을 할 때 많은 HTML , CSS , JS 및 기타 파일을 처리합니다. 무엇이든 디버깅하고 싶을 때 Chrome Dev 도구를 엽니다. 특정 파일을 빠르게 검색하고 찾아 작업을 더 쉽게 할 수 있습니다. 그냥^(Just) , Ctrl + P 를 누르고 파일 이름을 입력하기 시작하십시오. 이렇게 하면 파일 목록에서 특정 파일을 찾는 데 도움이 됩니다.

2. 소스 파일 내에서 검색

이전 트릭에서 특정 파일을 검색하는 방법을 알게 되었습니다. 로드된 모든 파일에서 특정 문자열을 검색할 수도 있습니다. Ctrl Ctrl + Shift + F 를 눌러 파일에서 문자열을 검색합니다. 정규식도 지원합니다.

3. 특정 라인으로 이동

소스 파일을 열고 특정 줄로 이동하려면 Ctrl + G 를 누르고 줄 번호를 입력하고 Enter 키를 누릅니다.

4. 콘솔^(Console) 탭 에서 DOM 요소 선택

개발자 도구^{(Dev Tools)} 를 사용하면 콘솔에서 요소를 선택할 수도 있습니다.

• $() – 일치하는 CSS 선택기 의 첫 번째 항목을 반환 합니다.^(Returns)
• $$() – 주어진 CSS 선택기와 일치하는 요소의 배열을 반환합니다.

더 많은 콘솔 명령을 보려면 이 게시물로 이동하십시오.^{(this post.)}

5. 다중 캐럿 사용

때때로 여러 개의 캐럿을 다른 위치에 설정하고 싶을 때 Ctrl 키를 누른 상태에서 캐럿을 배치할 위치를 클릭하여 ^{(Ctrl )}Chrome 개발자^{(Chrome Dev)} 도구 에서 쉽게 설정할 수 있습니다. 그런 다음 쓰기를 시작하면 선택한 여러 위치에 배치된 것을 볼 수 있습니다.

6. 로그 보존

로그 보존^(Preserve) 은 페이지가 로드되더라도 로그를 유지하는 데 도움이 됩니다. 콘솔^(Console) 로그 에서 로그 보존^{(Preserve log )} 옆에 있는 옵션을 선택 하면 로그가 보존됩니다. 이것은 페이지가 언로드되기 전에 로그를 표시하고 버그를 조사하는 데 도움이 됩니다.

7. 내장 코드 미화 사용

Chrome 개발자 도구 에는 Pretty ^{(Chrome Dev Tools)}print "{}"^{(pretty print “{}”)} 라는 코드 미화 기능이 내장되어 있습니다 . 개발자 도구는 최소화된 코드를 보여주므로 읽기가 쉽지 않습니다. 열려 있는 소스 파일의 왼쪽 하단에 표시되는 예쁜 인쇄 버튼을 클릭 하면 사람이 읽을 수 있는 형식으로 소스 파일이 표시됩니다.^(Click)

8. 귀하의 웹사이트는 모바일 친화적입니까? 여기에서 확인

Chrome 개발자 도구^{(Chrome Dev Tools)} 를 사용하면 웹사이트가 모바일 친화적인지 여부도 확인할 수 있습니다. 다양한 기기에서 웹사이트가 어떻게 보이는지 확인할 수 있습니다. Chrome Dev 도구 로 이동하고 에뮬레이션^{(Emulation )} 탭에서 다양한 장치를 파일화할 수 있습니다. 원하는 장치를 선택하고 해당 장치에서 웹사이트가 어떻게 보이는지 테스트하십시오.

자세한 내용은 다음 동영상을 참조하세요.

9. 센서 및 지리적 위치 에뮬레이션^{(Geographical Location)}

터치 스크린 및 가속도계와 같은 센서를 에뮬레이트할 수도 있습니다. 지리적 위치를 에뮬레이션할 수도 있습니다. 이렇게 하려면 Emulation -> Sensors.

10. 현재 단어의 다음 발생 선택

모든 항목에서 단어를 바꾸려면 해당 단어를 선택하고 Ctrl + D 를 눌러 선택한 단어의 다음 항목을 선택합니다. 그런 다음 한 번에 모든 발생에서 해당 단어를 편집할 수 있습니다.

11. 색상 형식 변경

Shift + Click 을 사용 하여 rgba, 16진수 및 hsl 형식 간에 변경 사항을 변경하기만 하면 됩니다.

12. 작업 공간을 통해 로컬 파일에 변경 사항 추가^(Add)

Chrome Dev 도구 에서 소스 파일을 편집하고 CSS , JavaScript 및 기타 파일 을 일부 변경할 수 있습니다. 이러한 변경 사항을 로컬 파일에 추가하기 위해 작업 공간에서 디스크의 파일로 변경 사항을 복사하여 붙여넣을 필요가 없습니다. Chrome 개발자^{(Chrome Dev)} 도구를 사용하면 파일을 일치시키고 개발자 도구에서 수행한 변경 사항으로 로컬 파일을 업데이트할 수 있습니다. 이 작업을 수행하려면 소스^{(Sources )} 탭 의 왼쪽에 있는 소스 파일을 마우스 오른쪽 버튼으로 클릭하고 작업 공간에 폴더 추가를 선택합니다.^{(Add Folder to workspace.)}

도움이 되었기를 바랍니다.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the popular web browsers for web deνеlopment, due to itѕ advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Windows PC 사용자를위한 최고의 Google Chrome Tips and Tricks

• 스티커 메모 사용을 위한 3가지 유용한 팁 및 요령

• Website를 사용하여 Font를 다운로드하는 방법 Developer Tools

• Restart Chrome, Windows 11/10에서 탭을 잃지 않고 Edge or Firefox

• Google Chrome browser의 Inspect Element 사용에 대한 팁

• 모든 주요 브라우저에 대해 Windows 10에 저장된 쿠키는 어디에 있습니까?

• Google Chrome에서 Adobe Flash Player을 차단 해제하는 방법

• YouTube 자동 재생이 작동하지 않는 문제 수정

• 문제 수정: 웹사이트를 방문할 때 Chrome이 많은 프로세서(CPU)를 사용합니다.

• Identify Chrome의 글꼴, Developer Tools를 사용한 Edge and Firefox

• Google Chrome에서 403 Forbidden Error을 수정하는 방법

• Chrome, Firefox, Microsoft Edge 및 Opera에 탭을 음소거하는 방법

• HTTPS를 통한 DNS 또는 보안 DNS 조회란 무엇입니까? 구글 크롬에서 활성화!

• Dark Mode에서 Google Chrome을 넣는 법

• Google Chrome Access Blocked Sites에 대한 최고의 VPN 15

• Chrome, Firefox, Edge 및 Opera에서 모바일 browser emulator를 사용하는 방법

• Android에서 Chrome 알림을 끄는 방법 : 완전한 가이드

• Developer Tools을 사용하여 Chrome or Edge의 특정 사이트에 대한 Site Data 명확한 Site Data

• Chrome, Firefox, Edge 및 Opera에서 시크 리토를가는 방법

• Chrome 알림을 해제하는 방법 : 알아야 할 모든 것