Google 크롬^{(Google Chrome)} 은 일반 인터넷 사용자뿐만 아니라 웹 사이트를 자주 만들고 블로그를 디자인하는 웹 개발자를 위해 설계되었습니다. Google 크롬 의 ^{(Google Chrome)}요소 검사^{(Inspect Element )} 또는 검사^{(Inspect )} 옵션을 사용하면 사용자가 보이지 않는 웹사이트에 대한 일부 정보를 찾을 수 있습니다. . 다음은 Windows PC 용 ^{(Windows PC)}Chrome^{(Google Chrome)} 브라우저 의 Inspect Element 사용에 대한 몇 가지 팁입니다 .

Chrome의 요소 검사

1] Find hidden JavaScript/Media files

방문자가 웹 페이지에 15초 또는 20초 이상 머무르면 많은 웹 사이트에서 팝업을 표시합니다. 또는 여러 번 이미지, 광고 또는 아이콘이 무작위로 어딘가를 클릭한 후 열립니다. 웹 페이지에서 이러한 숨겨진 파일을 찾으려면 요소 검사 의 ^{(Inspect Element)}소스^(Sources) 탭을 사용할 수 있습니다 . 탐색할 수 있는 트리 보기 목록이 왼쪽에 표시됩니다.

2] Get HEX/RGB color code in Chrome

때때로 우리는 색상을 좋아하고 색상 코드를 알고 싶을 수 있습니다. Google 크롬^{(Google Chrome)} 의 기본 옵션을 사용하여 특정 웹페이지에 사용된 HEX 또는 RGB 색상 코드 를 쉽게 찾을 수 있습니다 . 색상을 마우스 오른쪽 버튼으로 클릭 하고 ^{(Right-click)}검사^(Inspect) 를 클릭합니다 . 대부분의 경우 다른 CSS^(CSS) 와 함께 오른쪽에 색상 코드가 표시됩니다 . 당신이 그것을 볼 수 없다면, 당신은 무료 색상 선택기 소프트웨어를 사용해야 할 수도 있습니다.

팁 : 이 ^(TIP)Color Picker 온라인 도구^{(Color Picker online tools)} 도 살펴보십시오 .

3] 웹 페이지 성능 개선 팁 얻기^{(3] Get web page performance improvement tips)}

누구나 빨리 열리는 웹 사이트에 착륙하는 것을 좋아합니다. 웹 사이트를 디자인하는 경우 항상 염두에 두어야 합니다. 페이지 로딩 속도를 확인하고 최적화하는 많은 도구가 있습니다. 그러나 Google 크롬^{(Google Chrome)} 에는 사용자가 웹사이트 로딩 속도를 개선하기 위한 팁을 얻을 수 있는 도구가 내장되어 있습니다. 이러한 도구에 액세스하려면 감사^(Audits) 탭으로 이동하여 네트워크 사용률^{(Network Utilization)} , 웹 페이지 성능^{(Web Page Performance)} , 페이지 다시 로드 및 로드 시 감사^{(Reload Page and Audit on Load)} 가 선택되어 있는지 확인하십시오. 그런 다음 실행^{(Run )} 버튼을 클릭하십시오. 페이지를 다시 로드하고 페이지를 더 빠르게 만드는 데 사용할 수 있는 몇 가지 정보를 표시합니다. 예를 들어, 캐시 만료가 없는 모든 리소스를 가져올 수 있습니다 .^(JavaScript)하나의 파일로 결합될 수 있습니다.

4] 응답성 확인^{(4] Check responsiveness)}

웹 페이지를 반응형으로 만드는 것은 오늘날 매우 중요합니다. 사이트가 완전히 반응하는지 여부를 확인할 수 있는 도구가 많이 있습니다. 그러나 Google 크롬^{(Google Chrome)} 의 이 도구는 사용자가 사이트가 반응형인지 여부와 특정 모바일 장치에서 어떻게 보이는지 확인할 수 있도록 도와줍니다. 웹 사이트를 열고 요소 검사^{(Inspect Element )} 탭을 가져 오고 모바일^{(mobile )} 버튼을 클릭하고 해상도를 설정하거나 원하는 장치를 선택하여 웹 페이지를 테스트하십시오.

5] 라이브 웹사이트 편집^{(5] Edit live website)}

웹 페이지를 만들고 있는데 색 구성표나 탐색 메뉴 크기, 콘텐츠 또는 사이드바 비율에 대해 혼동하고 있다고 가정해 보겠습니다. Chrome 의 ^{(Google Chrome)}요소 검사^{(Inspect Element)} 옵션을 사용하여 라이브 웹사이트를 편집할 수 있습니다 . 라이브 웹사이트에 변경 사항을 저장할 수는 없지만 나중에 사용할 수 있도록 모든 편집을 수행할 수 있습니다. 그렇게 하려면 요소 검사 를 열고 왼쪽에서 ^{(Inspect Element)}HTML 속성을 선택하고 오른쪽에서 스타일을 변경합니다. CSS 에서 변경 사항을 적용한 경우 파일 링크를 클릭하고 전체 코드를 복사하여 원본 파일에 붙여넣을 수 있습니다.

Inspect Element of Google Chrome 은 모든 웹 개발자의 진정한 동반자입니다. 한 페이지 웹사이트를 개발하든 동적 웹사이트를 개발하든 상관없이 이 팁을 확실히 사용할 수 있습니다.

Tips on using the Inspect Element of Google Chrome browser

Google Chrome is designed not just for regular intеrnеt υsеrs but alѕo for web developers, who often create a websitе, design blogs, etc. The Inspect Element or Inspect option of Google Chrome assists users to find some information about a website that is hidden from view. Here are some tips on using the Inspect Element of Google Chrome browser for Windows PC.

Inspect Element of Google Chrome

1] Find hidden JavaScript/Media files

Many websites show popups if the visitor stays on the web page for more than 15 or 20 seconds. Or, many times an image, ad or icon, opens after clicking somewhere randomly. To find these hidden files on a web page, you can make use of the Sources tab of Inspect Element. It shows a tree-view list on the left-hand side that can be explored.

2] Get HEX/RGB color code in Chrome

Sometimes we may like a color and may want to find out its color code. You can easily find the HEX or RGB color code used on a particular web page, using the native option in Google Chrome. Right-click on the color, and click on Inspect. Most of the time, you will get the color code on the right-hand side with other CSS. If you do not see it, well, you may have to use some free color picker software.

TIP: Take a look at these Color Picker online tools too.

3] Get web page performance improvement tips

Everyone loves to land on a website that opens fast. If you are designing your website, you should always keep that in mind. There are many tools to check and optimize page loading speed. However, Google Chrome also comes with an inbuilt tool that allows users to get tips to improve the website loading speed. To access these tools, go to Audits tab, and make sure Network Utilization, Web Page Performance, and Reload Page and Audit on Load are selected. Then click on Run button. It will reload the page, and show you some information that can be used to make the page faster. For instance, you can get all the resources those are not having any cache expiration, JavaScript that can be combined into one file, and so on.

4] Check responsiveness

Making a web page responsive is crucial, nowadays. There are loads of tools that can check whether your site is completely responsive or not. However, this tool of Google Chrome helps users to know whether the site is responsive or not as well as check how it would look on a particular mobile device. Open any website, get Inspect Element tab, click on the mobile button, set the resolution, or select the desired device to test the web page.

5] Edit live website

Let’s assume that you are creating a web page, but you are confused about the color scheme or navigation menu size or content or sidebar ratio. You can edit your live website using the Inspect Element option of Google Chrome. Although you cannot save the changes on a live website, you can get carry out all the editing so that you can use it further. To do so, open Inspect Element, select the HTML property from the left-hand side and make styling changes on the right-hand side. If you make any change in CSS, you can click on the file link, copy the entire code and paste that into the original file.

Inspect Element of Google Chrome is a real companion of every web developer. It doesn’t matter whether you are developing a one-page website or a dynamic website, you can certainly use these tips.

Related posts

• Google Chrome이 응답하지 않고 Relaunch?

• Google Chrome browser에 File Download 오류를 수정하는 방법

• Google Chrome에서 Default Print Settings를 변경하는 방법

• Google Chrome에서 Browser Close에서 Destroy Profile의 방법

• Anna Assistant은 Google Chrome 용 완벽한 voice assistant입니다

• Google Chrome에서 Spell Checker을 자동으로 켜는 방법

• Fix ERR_QUIC_PROTOCOL_ERROR Google Chrome

• AW를 수정하는 방법, Snap! error message Google Chrome browser

• Google Chrome 푸시 알림 가입을 90 일로 제한하려면

• 사용자가 확장 프로그램을 Google Chrome에서 설치하지 못하게하는 방법

• Google Chrome의 Fix ERR_SPDY_PROTOCOL_ERROR error

• Google Chrome vs Windows 10 Firefox Quantum

• Google Chrome에서 Commander feature을 활성화 및 사용하는 방법

• Windows PowerShell을 사용하여 Google Chrome을 설치하는 방법

• 어떻게 Google Chrome browser의 기본 글꼴 크기를 변경하려면

• Fix Blurry File Open dialog Google Chrome and Microsoft Edge의 상자

• Google Chrome에서 자동 로그인 기능을 사용하지 않도록 설정하는 방법

• Google Chrome Windows 10의 문제 및 문제

• 귀하의 시계가 앞서 나가고 있거나 시계가 Google Chrome에 오류가 뒤에 있습니다

• Google Chrome를 사용하여 Internet Connection Speed을 확인하는 방법