Chrome DevTools12

• 

  [Chrome]크롬 개발자 도구 네트워크 탭에서 유형별로 필터링 크롬 개발자 도구 네트워크 탭에서 유형별로 필터링 크롬 개발자 도구의 네트워크 탭에는 필터 기능이 존재하며 유형별로 요청(Request)을 필터링할 수 있습니다. 이번 포스팅은 요청(Request)을 유형별로 필터링하는 방법과 각 유형에 대해 간략하게 설명합니다. ※ Wasm과 매니페스트(manifest) Wasm은 WebAssembly의 약자이며, JavaScript가 아닌 다른 프로그래밍 언어로 작성된 코드를 호출하도록 하는 기술입니다. 매니페스트(manifest)는 웹 애플리케이션에 대한 정보를 JSON으로 표현하는 파일입니다. Wasm와 매니페스트에 대한 자세한 정보가 없어서 설명은 생략합니다. 다중 선택 여러 유형을 동시에 필터링하려면 Mac은 Command, Windows는 Control를 누.. 개발자 도구/크롬(Chrome) 2022. 11. 2.

• 

  [Chrome]크롬 개발자 도구 네트워크 탭에서 요청(Request) 검색 방법 크롬 개발자 도구 네트워크 탭의 필터 크롬 개발자 도구의 네트워크 탭 좌측 상단에 깔때기 모양의 필터 아이콘이 존재합니다. 필터 아이콘을 선택하면 다음 스크린샷처럼 필터 기능이 활성화됩니다. 이번 포스팅은 필터 기능에서 필터 검색창과 반전 사용 방법을 소개합니다. 텍스트로 Request 찾기 필터 검색창에 텍스트를 입력하면 요청 URL에 해당 키워드가 포함된 Reqeust만 조회됩니다. 다음 스크린샷에서 "keywo"라는 키워드가 요청 URL에 포함된 Request는 202개 중 2개라는 것을 확인할 수 있습니다. 정규 표현식으로 Request 찾기 필터 검색창에 정규 표현식을 사용하여 특정 Request를 찾을 수 있습니다. "search"라는 키워드가 요청 URL에 포함된 Request는 202개 중.. 개발자 도구/크롬(Chrome) 2022. 11. 1.

• 

  [Chrome]크롬 개발자 도구 네트워크 설정 기능 알아보기 크롬 개발자 도구 네트워크 설정 기능 크롬 76번째 버전에서 네트워크 패널의 UI가 변경되었습니다. 크롬 개발자 도구 창이 좁을 때 사용성 문제가 있어서 덜 사용되는 몇 가지 옵션이 네트워크 설정으로 이동되었습니다. 네트워크 패널 우측 상단의 톱니바퀴 아이콘을 클릭하면 위 스크린샷처럼 큰 요청 열 사용, 프레임별 그룹 지정, 개요 표시, 스크린샷 캡처를 선택할 수 있는 패널이 나타납니다. 이번 포스팅은 네트워크 설정에 존재하는 각 기능에 대해 소개합니다. 큰 요청 열 사용 큰 요청 열 사용은 말 그대로 요청에 대해 크게 표시한다는 의미입니다. [큰 요청 열 사용 선택 전] [큰 요청 열 사용 선택 후] "큰 요청 열 사용" 체크 후 크기와 시간에 대해 간략하게 알아봅시다. 55.2 kB는 압축된 리소스의.. 개발자 도구/크롬(Chrome) 2022. 11. 1.

• 

  [Chrome]HAR 파일 가져오기 및 내보내기 HAR 파일 HAR는 HTTP Archive format의 약자로 웹 브라우저와 웹 사이트 간의 정보 추적에 사용되는 형식입니다. 좀 더 쉽게 설명하자면, 크롬 개발자 도구 네트워크 탭의 패널 정보가 JSON 형식으로 변환된 파일입니다. HAR 파일은 주로 페이지 렌더링 문제, 로딩 시간, API 호출하는 과정에서 발생한 에러를 분석하는 용도로 사용됩니다. 예를 들어, API를 호출하는 과정에서 에러가 발생하였으며, 에러 내용을 웹 페이지 개발자에게 전달해야 하는 경우 HAR 파일만 전달하면 됩니다. 이번 포스팅은 HAR 파일의 장점과 크롬에서 HAR 파일을 내보내거나 가져오는 방법을 설명합니다. HAR 파일이 유용한 경우 다음은 HAR 파일을 유용하게 사용할 수 있는 몇 가지 사례입니다. 차단된 요청 .. 개발자 도구/크롬(Chrome) 2022. 10. 31.

• 

  [Chrome]크롬에서 사용자 에이전트(User-Agent) 변경하는 방법 사용자 에이전트(User-Agent) 크롬 개발자 도구 네트워크 탭에서 요청 헤더를 살펴보면, 다음 사진처럼 사용자 에이전트(User-Agent)를 확인할 수 있습니다. 사용자 에이전트(User-Agent)란? 네트워크 요청을 하는 장치에 대한 정보입니다. 사용자 에이전트 문자열은 브라우저에서 HTTP 요청 헤더로 전송되며 사용 중인 OS, 브라우저 버전 및 정보를 포함하고 있습니다. 사용자 에이전트 문자열에 대한 명명 규칙은 정해져 있지 않으며, 명확한 의미가 없는 토큰을 포함하므로 해석하기 어려울 수 있습니다. 이번 포스팅은 크롬에서 사용자 에이전트 변경하는 방법을 설명하는 게 목적이므로 사용자 에이전트에 대한 자세한 설명은 하지 않습니다. 사용자 에이전트 문자열 해석 위 사진에서 보았던 사용자 에이.. 개발자 도구/크롬(Chrome) 2022. 10. 31.

• 

  [Chrome]크롬 개발자 도구 네트워크 속도 조절하는 방법 크롬 개발자 도구 네트워크 속도 조절하는 방법 일반적으로 네트워크 속도는 모바일보다 PC가 빠릅니다. 따라서, PC에서 웹 페이지를 개발하는 경우 모바일처럼 동작하도록 테스트해야 하는 상황이 발생합니다. 다행히도 크롬 개발자 도구는 네트워크 속도를 조절할 수 있는 사용 제한 기능을 제공합니다. 이 기능을 통해 네트워크 속도를 조절한 다음 모바일에서 페이지를 로드하는 데 걸리는 시간을 측정할 수 있습니다. 이번 포스팅은 크롬 개발자 도구 네트워크 탭 툴바에 존재하는 사용 제한 기능 사용 방법을 설명합니다. 네트워크 속도 조절 방법 순서 1. 크롬 개발자 도구의 네트워크 탭으로 이동 후 ▼ 아이콘을 선택합니다. 순서 2. 원하는 항목을 선택합니다. 순서 3. 새로고침 아이콘을 꾹 선택한 다음 "캐시 비우기 .. 개발자 도구/크롬(Chrome) 2022. 10. 31.

• 

  [Chrome]크롬 개발자 도구 네트워크 탭 툴바 활용 방법 크롬 개발자 도구 네트워크 탭 툴바 활용 방법 크롬 개발자 도구의 네트워크 탭은 FrontEnd - BackEnd 혹은 Client - Server 간 주고받는 데이터를 확인하기 위해 사용되는 유용한 기능입니다. 네트워크 탭은 요청-응답 데이터뿐만 아니라 네트워크 속도, 요청 및 응답 리소스의 크기, API 호출 순서도 확인할 수 있기에 이 기능을 잘 활용한다면, 자바스크립트에서 console.log() 또는 자바에서 System.out.println()과 같은 코드를 작성하지 않고 디버깅할 수 있습니다. [티스토리 메인 화면 접속 후 개발자 도구 실행] 이번 포스팅은 네트워크 탭 툴바에 존재하는 6가지 기능(기록 중지, 삭제, 필터, 검색, 로그 보존, 캐시 사용 중지)을 소개합니다. (사용 제한, 네.. 개발자 도구/크롬(Chrome) 2022. 10. 31.

• 

  [Chrome]크롬에서 텍스트 편집하는 방법 크롬에서 텍스트 편집하는 방법 웹 페이지는 웹 브라우저에서 표시하는 텍스트, 이미지, 동영상을 표시하는 문서일 뿐입니다. 예를 들어, 다음 사진처럼 문자열로 구성된 내용은 텍스트고 이미지는 말 그대로 이미지입니다. 이러한 리소스(텍스트, 이미지 파일, 동영상 파일)는 Server에 저장됩니다. 유능한 해커 또는 해당 웹 페이지 개발자가 아닌 이상 마음대로 Server에 저장된 리소스를 변경할 수 없지만, 단순히 웹 브라우저에 보이는 텍스트는 편집할 수 있습니다. 예를 들어, 붉은색 테두리 안에 존재하는 텍스트를 "Hello"라고 조작할 수 있습니다. [조작 전] [조작 후] 텍스트를 편집하는 방법은 간단하며, 크롬뿐만 아니라 개발자 도구에서 콘솔을 지원하는 브라우저에서도 편집할 수 있습니다. 텍스트 편집.. 개발자 도구/크롬(Chrome) 2022. 10. 28.

• 

  [Chrome]크롬 개발자 도구 JavaScript 비활성화하는 방법 크롬 개발자 도구 JavaScript 비활성화하는 방법 웹 화면에서 값을 입력하거나 버튼을 클릭하는 행위는 모두 JavaScript에 의해 수행됩니다. Chrome은 기본적으로 JavaScript가 활성화되어 있지만, JavaScript가 비활성화된 웹 화면을 확인하고 싶을 수 있습니다. 예를 들어, 크롬으로 Airbnb 공식 사이트 접속 후 JavaScript를 비활성화하면 버튼을 클릭해도 어떠한 동작을 하지 않습니다. 값을 입력하거나 버튼을 클릭하는 행위뿐만 아니라 마우스 우클릭 방지, 복붙 방지, 드래그 방지 기능도 JavaScript에 의해 수행되므로 JavaScript를 비활성화하면, 복붙 방지된 글도 복사할 수 있습니다. 웹 페이지에서 JavaScript 비활성화하는 방법은 다음과 같습니다. .. 개발자 도구/크롬(Chrome) 2022. 10. 28.

• 

  [Chrome]크롬 개발자 도구 테마 변경하는 방법 크롬 개발자 도구 테마 변경하는 방법 대부분의 FrontEnd 개발자들은 흰색 테마의 크롬 개발자 도구에 익숙합니다. 만약, 웹 페이지처럼 크롬 개발자 도구의 테마를 다크 모드로 변경하고 싶다면, 이번 포스팅에서 설명하는 방법을 따라하면 되겠습니다. 순서 1. 먼저, 크롬 개발자 도구를 실행합니다. 순서 2. 우측 상단의 톱니바퀴 모양의 아이콘을 선택하여 크롬 개발자 도구 설정으로 이동합니다. 순서 3. 환경설정 탭으로 이동하여 다음 사진처럼 테마를 선택할 수 있습니다. 다크 모드를 원하는 경우 "어둡게"를 선택합니다. 순서 4. 우측 상단의 x 아이콘을 클릭한 뒤 다시 크롬 개발자 도구로 넘어오면, 테마가 변경된 것을 확인할 수 있습니다. 커스텀 테마 적용 크롬에서 기본적으로 제공하는 테마가 아닌 커스.. 개발자 도구/크롬(Chrome) 2022. 10. 27.

• 

  [Chrome]크롬 개발자 도구 HTML 요소 찾는 방법 크롬 개발자 도구 HTML 요소 찾는 방법 지난 포스팅에서는 크롬 개발자 도구를 실행하는 방법에 대해 소개하였습니다. 이번 포스팅은 크롬 개발자 도구에서 HTML 요소를 찾는 방법을 소개합니다. 주로 다음과 같은 상황에서 크롬 개발자 도구에서 HTML 요소를 찾습니다. 1. 다른 웹 페이지에 적용된 DOM 구조 및 css를 분석 2. 현재 개발하고 있는 소스 코드(html, css, js)가 DOM에 정상적으로 적용되었는지 검증 방법 1. 우클릭 후 검사 첫 번째 방법으로 마우스 우클릭 후 검사를 선택하여 HTML 요소를 확인할 수 있습니다. 예를 들어, Naver 메인 화면에서 "Naver 로그인"은 어떤 태그로 표기하는지 혹은 어떤 폰트가 적용되었는지 확인하려고 합니다. 사진 1. Naver 로그인에.. 개발자 도구/크롬(Chrome) 2022. 10. 27.

• 

  [Chrome]크롬 개발자 도구 실행 방법 크롬 개발자 도구 실행 방법 일반적으로 F12 단축키를 통해 크롬 개발자 도구를 실행할 수 있지만, 특정 웹 사이트에서 F12 단축키에 특정 이벤트 핸들러 함수를 등록했거나 사용 중인 OS가 Mac인 경우 F12 단축키가 동작하지 않습니다. 이번 포스팅은 F12 단축키를 사용하지 않고 크롬 개발자 도구를 실행할 수 있는 몇 가지 방법을 소개합니다. 참고로 제가 사용하고 있는 PC의 운영체제는 Mac이므로 사진과 다를 수 있습니다. 마우스 우클릭 첫 번째 방법으로 마우스 우클릭으로 크롬 개발자 도구를 실행할 수 있습니다. 특정 HTML DOM 요소의 스타일 또는 속성을 확인하고 싶은 경우 요소를 마우스 우클릭 버튼으로 클릭하고 검사를 선택합니다. 예를 들어, Naver 메인 사이트에서 로고의 스타일 또는 .. 개발자 도구/크롬(Chrome) 2022. 10. 14.