개발자도구 4

{개발자도구} Console 탭 유틸 함수

개발자도구에 있는 Console 탭에서 디버깅에 유용한 유틸 함수를 제공합니다. 오늘은 알고 있으면 언젠간 써먹을 Console 탭 유틸 함수를 알아보겠습니다. 목차 - clear(): 콘솔 로그 모두 제거하고 싶을 때 - copy(param): 복사하고 싶을 때 - $_: 이전 실행 결괏값 참조하고 싶을 때 - $(selector), $$(selector): DOM 참조하고 싶을 때 clear(): 콘솔 로그 모두 제거하고 싶을 때 clear() 함수는 현재 콘솔 패널에 표시되고 있는 로그들을 모두 제거합니다. 로그를 모두 제거하고 새로운 작업을 하고 싶을 때 유용합니다. clear() 실행 후에는 Console was cleared와 같은 문구가 표시됩니다. copy(param): 복사하고 싶을 때 ..

브라우저 활용 2024.01.29

console.log에서 CSS 사용 방법 (ft. 가끔 코딩하는 척할 때 꿀팁?)

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 디버깅을 하기 위해 console 객체의 log, info, error, dir, table 등 다양한 메서드를 활용하곤 합니다. 텍스트와 객체 이외에도 CSS를 사용할 수 있는데요. 오늘은 console.log에서 CSS 사용 방법을 알아보겠습니다! 목차 활용 사례: Self-XSS 주의 CSS 사용 방법 지원하는 CSS 범위 활용 사례: Self-XSS 주의 대중적으로 사용하는 서비스에서 활용 사례를 찾아보면 Self-XSS에 대한 주의를 주고 있습니다. Meta에서 운영 중인 Instagram, Threads, Facebook에서는 아래와 같이 Self-XSS에 대한 주의를 주고 있습니다. Google 번역기에서는 다음과 같이 주의를 주고 ..

[개발자도구] 네트워크 필터 의미 | js css fetch xhr ws

네트워크 필터에서는 리소스 종류에 따라 필터링을 할 수 있습니다. 이 포스트에서는 자주 사용되는 리소스 위주로 정리했습니다. Doc HTML 문서에 대한 리소스를 확인할 수 있습니다. SSR를 정상적으로 수행 중인지 확인할 때 용이합니다. JS JavaScript에 대한 리소스를 확인할 수 있습니다. Fetch/XHR JavaScript에서 실행된 비동기 요청 리소스를 확인할 수 있습니다. fetch() 함수, XMLHTTPRequest 객체 실행을 확인할 수 있습니다. CSS CSS에 대한 리소스를 확인할 수 있습니다. Font 폰트 파일에 대한 리소스를 확인할 수 있습니다. 웹 페이지 로드 후 폰트가 바뀌거나 로드 시간이 늦을 때 유용합니다. Img 이미지 리소스를 확인할 수 있습니다. 이미지 사이즈..

브라우저 활용 2024.01.17

[개발자도구] 네트워크 디버깅

개발자도구를 통해 페이지에서 발생하는 네트워크 디버깅을 위해서 녹화버튼을 실행한 뒤 새로고침합니다. 모든 네트워크 활동이 네트워크 로그에 기록됩니다. 네트워크 로그 네트워크 로그의 각 행은 리소스를 표시합니다. 기본적으로 시간순서로 나열됩니다. 특정 시점 확인 네트워크 로그에서 특정 시점을 선택해서 리소스를 폭포수 모델로 확인할 수 있습니다. 리소스 데이터 리소스를 선택하면 데이터를 확인할 수 있으며 항목별로 의미는 다음과 같습니다. Headers HTTP 요청/응답 헤더를 확인할 수 있습니다. Payload HTTP POST/PUT 메소드일 때 HTTP 요청 Body에 담아 보낼 데이터를 확인할 수 있습니다. Preview HTTP 응답 Body의 데이터를 정리해서 확인할 수 있습니다. Response..

브라우저 활용 2024.01.17
728x90