Google 크롬 브라우저의 검사 요소 사용에 대한 팁

Google 크롬은 일반 인터넷 사용자뿐만 아니라 웹 개발자, 웹 사이트 제작자, 디자인 블로그 등을 위해 제작되었습니다.또는 Chrome의 Inspect 옵션은 사용자가 숨겨진 웹 사이트에 대한 정보를 찾을 수 있도록 도와줍니다. 다음은 Windows PC 용 Google 크롬 브라우저의 Inspect 요소 사용에 대한 팁입니다.

Chrome의 요소 검사

1] 숨겨진 JavaScript / 미디어 파일 찾기

방문자가 웹에있는 경우 많은 웹 사이트에 팝업이 표시됩니다. 페이지를 15 초 또는 20 초 이상 누릅니다. 또는 이미지, 광고 또는 아이콘이 무작위로 클릭 한 후 여러 번 열립니다. 이러한 웹 페이지의 숨김 파일을 찾으려면 요소 검사의 소스 탭을 사용할 수 있습니다.

2] Chrome에서 HEX / RGB 색상 코드 가져 오기

때로는 색상이 맘에 들거나 색상 코드를 찾아야하는 경우가 있습니다. Google 크롬의 기본 옵션을 사용하여 특정 웹 페이지에서 사용 된 16 진수 또는 RGB 색상 코드를 쉽게 찾을 수 있습니다. 색상을 마우스 오른쪽 버튼으로 클릭하고 검사 를 클릭하십시오. 대부분의 경우 다른 CSS와 함께 오른쪽에 색상 코드가 표시됩니다.

팁:이 색상 선택기 온라인 도구도 살펴보십시오. 3] 웹 페이지 성능 개선 팁 가져 오기

누구나 빨리 열리는 웹 사이트에 착륙하는 것을 좋아합니다. 당신이 당신의 웹 사이트를 디자인하는 경우에, 당신은 항상 그것을 명심해야한다. 페이지로드 속도를 확인하고 최적화 할 수있는 많은 도구가 있습니다. 그러나 Google 크롬에는 사용자가 웹 사이트로드 속도를 향상시키기위한 팁을 얻을 수있는 내장 도구가 함께 제공됩니다. 이러한 도구에 액세스하려면

감사 탭으로 이동하여 네트워크 사용률 , 웹 페이지 성능 및 로드시 페이지 및 감사 다시로드 가 선택됩니다. 그런 다음 실행 버튼을 클릭하십시오. 페이지를 새로 고침하고 페이지를 더 빠르게 만드는 데 사용할 수있는 정보를 보여줍니다. 예를 들어, 캐시 만료가없는 모든 리소스, 하나의 파일로 결합 할 수있는 JavaScript 등을 얻을 수 있습니다. 4 응답 확인

웹 페이지를 응답으로 만드는 것이 요즘 중요합니다. 귀하의 사이트가 완전히 반응하는지 여부를 확인할 수있는 많은 도구가 있습니다. 그러나 Google 크롬의이 도구는 사용자가 사이트가 반응하는지 여부를 알 수 있도록 도와 주며 특정 모바일 장치에서 어떻게 보이는지 확인할 수 있습니다. 웹 사이트를 열고

요소 검사 탭을 클릭 한 다음 모바일 웹 페이지 편집 버튼을 클릭하여 해상도를 설정하거나 웹 페이지를 테스트 할 장치를 선택하십시오. 5 라이브 웹 사이트 편집

웹 페이지를 만들고 있다고 가정 해 보겠습니다. 구성표 또는 탐색 메뉴 크기 또는 내용 또는 사이드 바 비율. Google 크롬의 요소 검사 옵션을 사용하여 실시간 웹 사이트를 수정할 수 있습니다. 실제 웹 사이트에서 변경 사항을 저장할 수는 없지만 모든 편집 작업을 수행하여 더 많이 사용할 수 있습니다. 이렇게하려면 요소 검사를 열고 왼쪽에서 HTML 속성을 선택한 다음 오른쪽에서 스타일을 변경합니다. CSS를 변경하면 파일 링크를 클릭하고 전체 코드를 복사하여 원본 파일에 붙여 넣을 수 있습니다.

Chrome의 Inspect 요소는 모든 웹 개발자의 실제 동반자입니다. 1 페이지 웹 사이트를 개발하든 동적 웹 사이트를 개발하든 관계없이이 팁을 확실히 사용할 수 있습니다.