완벽하게 구축된 웹사이트는 없습니다. 사람이 만든 모든 제품과 마찬가지로 코드 오류도 프로세스의 일부입니다. 그렇기 때문에 사용자에게 가능한 최고의 경험을 제공하기 위해 가능한 한 오류가 없는지 확인하기 위해 구축하는 모든 새 웹사이트를 철저히 테스트하는 것이 중요합니다.
Google Chrome 의 DevTools 키트를 먼저 시도하지 않고 웹 사이트를 테스트해서는 안 됩니다. Chrome 개발자 모드를 사용하면 새 사이트(또는 기존 사이트)를 시도하고 철저하게 테스트하여 버그를 찾고 수정할 수 있습니다. 또한 소스 코드 보기를 포함하여 다른 사이트가 실행되는 방식에 대한 통찰력을 제공할 수 있습니다.
다음은 Google Chrome(Google Chrome) 브라우저 개발자 모드, 포함된 도구 및 효과적으로 사용하는 방법에 대해 알아야 할 모든 것 입니다.
Chrome 개발자 모드란 무엇입니까?(What Is Chrome Developer Mode?)
Chrome 개발자 모드는 (Chrome)Chromebook(Chromebooks) 에서 볼 수 있는 것과 동일한 개발자 모드(same developer mode) 를 말하는 것이 아닙니다 . 우리가 말하는 것은 브라우저 자체에 내장된 광범위한 Chrome 개발 도구( Google DevTools 라고 함)입니다.(Google DevTools)
이들은 테스트 목적으로 Chrome(Google Chrome) 브라우저에 로드한 웹 페이지를 테스트, 분석 및 의도적으로 중단하도록 설계된 도구입니다(필요한 경우). 기본 수준에서 DevTools 를 사용하여 웹 사이트의 소스 코드를 볼 수 있으므로 사이트가 어떻게 구축되었고 얼마나 잘 실행되었는지 확인할 수 있습니다.
그러나 Google DevTools(Google DevTools) 는 이보다 더 많은 것을 제공합니다. Chrome 개발자 모드를 사용하여 페이지가 로드된 후 변경하고 Chrome 콘솔 명령을 실행 하여 페이지(Google Chrome) 를 제어 및 조작할 수 있을 뿐만 아니라 속도 및 네트워크 테스트를 실행하여 웹 트래픽을 모니터링할 수 있습니다.
Chrome DevTools 모드 에서 다양한 운영 체제 및 화면 해상도를 비롯한 다른 기기를 에뮬레이트할 수도 있습니다 . 이를 통해 사이트에 반응형 웹 디자인이 있는지, 장치 해상도 또는 유형에 따라 사이트 콘텐츠 및 레이아웃이 변경되는 위치를 확인할 수 있습니다.
이러한 도구는 전문 웹 개발자 또는 테스터를 대상으로 하지만 표준 Chrome 사용자가 (Chrome)DevTools 제품군 을 사용하는 방법을 아는 것도 편리합니다. 해결할 수 없는 사이트 문제가 있는 경우 Chrome 개발자 모드로 전환하면 문제가 사이트에 있는지 아니면 브라우저에 있는지 확인하는 데 도움이 될 수 있습니다.
Google Chrome DevTools 메뉴에 액세스하는 방법(How To Access Google Chrome DevTools Menu)
사용하려는 도구에 따라 Google Chrome DevTools 메뉴에 액세스할 수 있는 몇 가지 방법이 있습니다 .
이 작업을 수행하는 가장 쉬운 방법은 Google Chrome 메뉴를 사용하는 것입니다. 이렇게 하려면 오른쪽 상단에 있는 점 3개 메뉴 아이콘 을 클릭합니다. (three-dots menu icon)표시되는 메뉴에서 More Tools > Developer Tools 를 클릭 합니다.
그러면 열려 있는 Chrome 탭 또는 창의 오른쪽에 있는 새 메뉴에서 DevTools 키트가 열립니다.(DevTools)
키보드 단축키를 사용하여 이 작업을 수행할 수도 있습니다. Windows 또는 Linux PC 에서 Chrome 브라우저를 열고 F12 키를 누릅니다. 열려 있는 Chrome 탭이나 창 에서 Ctrl + Alt + J 또는 Ctrl + Alt + I 키를 누를 수도 있습니다.
macOS에서는 F12 를 누르거나 Option + Command + J 또는 Option + Command + I 키를 눌러 대신 Chrome DevTools 메뉴를 엽니다. 그러면 DevTools(DevTools) 메뉴 상단에 다른 Chrome 도구로 이동할 수 있는 옵션이 있는 (Chrome)Chrome 콘솔 이 열립니다 .
원하는 경우 열려 있는 웹 페이지에서 마우스 오른쪽 버튼을 클릭하고 검사(Inspect ) 옵션 을 클릭하여 웹 사이트의 소스 코드를 볼 수 있습니다( 프로세스에서 DevTools 메뉴의 (DevTools)요소(Elements) 탭 열기).
Chrome DevTools 사용(Using Chrome DevTools)
간단히 설명했듯이 Chrome DevTools 키트를 사용하여 (Chrome DevTools)요소(Elements) 탭 에서 웹사이트의 소스 코드를 볼 수 있습니다. 로드한 페이지의 코드를 분석하고 콘솔(Console) 탭 아래의 Chrome 콘솔에서 오류 메시지(사이트가 로드된 방식에 대한 문제를 나타냄)를 볼 수 있습니다 .
소스(Sources) 탭 에서 웹 사이트의 콘텐츠에 대한 다양한 소스를 볼 수도 있습니다 . 예를 들어 사이트 에서 CDN(콘텐츠 전송 네트워크)을 사용하는(using a content delivery network (CDN)) 경우 사이트 의 미디어는 여기에 다른 소스로 나열됩니다.
Chrome 개발자 모드를 사용하면 해당 콘텐츠를 직접 다운로드하거나 콘텐츠에 대한 보다 복잡한 분석을 수행할 수 있습니다.
사이트의 성능을 테스트하려면 네트워크(Network) 탭에서 네트워크 사용량을 모니터링하고 기록할 수 있습니다. 브라우저와 사이트 간에 이루어진 네트워크 요청의 속도, 크기 및 유형이 표시됩니다.
예를 들어 페이지가 처음 로드될 때 사이트는 페이지 콘텐츠 자체를 로드하지만 타사 데이터베이스의 데이터를 요청할 수도 있습니다. 예를 들어 로그인하면 여기에 네트워크 요청으로 표시되는 데이터베이스를 쿼리할 수 있습니다.
성능(Performance ) 탭에서 이를 더 자세히 분석할 수 있습니다. 여기 에서 다양한 지점에서 스크린샷을 기록하는 것을 포함 하여 Chrome 브라우저 사용을 더 깊이 기록할 수 있습니다. (Chrome)추가 분석을 위해 사이트를 로드하는 데 걸리는 시간을 기록합니다.
Google 크롬은 PC 메모리를 많이 사용하는 것으로 유명하므로 (being hard on your PC memory)메모리(Memory) 탭 에서 사이트의 JavaScript 메모리 사용량을 테스트할 수 있습니다 . 여기에서 다양한 Chrome(Different Chrome) 테스트 프로필을 사용할 수 있으며 이 테스트에 대한 추가 정보는 Chrome DevTools 설명서 페이지(Chrome DevTools documentation page) 에서 확인할 수 있습니다.
사이트 콘텐츠와 사용 중인 브라우저 저장소(예: 데이터 기록)에 대한 보다 심층적인 분석을 위해 애플리케이션(Application) 탭을 통해 검색할 수 있습니다. 쿠키(Cookies) 섹션 에서 사이트 쿠키 정보를 보거나 저장소 지우기(Clear storage) 옵션 을 클릭하여 사용 중인 저장소를 지울 수 있습니다.
사이트 보안이 걱정된다면 보안(Security ) 탭에서 사이트가 얼마나 잘 작동하는지 확인할 수 있습니다. 이렇게 하면 페이지에 정확하고 신뢰할 수 있는 SSL(SSL) 인증서 가 있는지 여부를 포함하여 페이지에 대한 Chrome의 보안 분석에 대한 간략한 개요가 제공됩니다 .
일반적인 사용자 표준을 충족하는지 여부와 사이트 성능이 검색 엔진 최적화에 영향을 미칠 수 있는 경우를 포함하여 사이트 성능에 대한 보고서를 생성하려는 경우 등대(Lighthouse) 탭을 클릭할 수 있습니다. 보고서에 대해 선택하거나 선택 취소할 수 있는 설정을 제공합니다. 보고서 생성(Generate report) 을 클릭 하여 볼 보고서를 만듭니다.
이것은 Chrome 개발자 모드가 개발자에게 가져올 수 있는 잠재력의 표면을 거의 긁지 않습니다. 더 자세히 알아보려면 Chrome DevTools 설명서(Chrome DevTools documentation) 를 사용하여 자체 사용자 테스트를 빌드하는 방법을 포함하여 제공되는 도구 및 기능에 대해 도움을 받을 수 있습니다.
고급 Google 크롬 트릭(Advanced Google Chrome Tricks)
대부분의 Chrome 사용자는 브라우저에 Google Chrome DevTools(Google Chrome DevTools) 키트가 있다는 사실을 전혀 알지 못하지만 고급 사용자에게는 웹사이트를 테스트하고 분석하는 데 매우 유용한 방법입니다. 사이트를 추가로 테스트하는 데 도움이 되는 웹 개발자용 타사 Chrome 확장 프로그램 도 있습니다.(Chrome extensions for web developers)
기본 웹사이트를 구축하는(building a basic website) 경우 Chrome 개발자 모드 로 전환하면 즉시 표시되지 않는 사이트 오류를 찾는 데 도움이 될 수 있습니다. Chrome 이 올바르게 작동하는 경우에만 이 작업을 수행할 수 있으므로 Chrome 충돌 문제로 어려움을 겪고(struggling with Chrome crashes) 있다면 먼저 브라우저를 재설정하거나 다시 설치해야 할 수 있습니다.
What Is Chrome Developer Mode & What Are Its Uses?
No website is built perfectly. Like all рroducts madе by humans, сode errors are part of thе process. That’s why it’s important to thoroughly test any new website you build to make sure that it’s as free of errors as possible to give your users the best possible experience.
You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code.
Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.
What Is Chrome Developer Mode?
When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.
These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.
Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.
You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.
While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.
How To Access Google Chrome DevTools Menu
There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.
The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.
This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.
You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.
On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.
If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.
Using Chrome DevTools
As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.
You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.
Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.
If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.
For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.
You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.
Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.
For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.
If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.
If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.
This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it.
Advanced Google Chrome Tricks
Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.
If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.
