디버깅 2

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 번역기에서는 다음과 같이 주의를 주고 ..

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

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

브라우저 활용 2024.01.17
728x90