Chrome DevTools | Tools for Web Developers | Google Developers
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.
cmd + option + i
/ ctrl + shift + i
cmd + option + c
cmd + option + j
The DevTools UI can be a little overwhelming… there are so many tabs! But, if you take some time to get familiar with each tab to understand what’s possible, you may discover that DevTools can seriously boost your productivity.
✔️ Note: In the DevTools docs, the top-level tabs are called panels.
Elements
panel의 기능HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널이다. DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있다. 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 할 수 있다.
CSS Specificity
- inline style > id > class > taguser agent stylesheet
란?reset.css
혹은 normalize.css
파일에서 기본 스타일 값을 모두 초기화 시키고 작업 시작. >>> 브라우저의 종류에 상관 없이 동일한 화면 출력 가능Console
패널의 기능console
객체console
은 객체!console
객체에는 log
메소드를 포함한 다양한 메소드가 존재한다.console.log()
실제 활용 예시console.log
를 활용하는 경우가 대부분console.log
를 활용해 확인 가능// 백엔드 API와 통신하는 fetch 함수
fetch('http://localhost:8000/login/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
'id': 'kim',
'password': '1234'
})
})
.then(response => response.json())
.then(response => {
console.log(response) // 백엔드에서 보내준 response를 console.log를 통해 먼저 확인
// 예시 1) token이 있는 경우
if (response.token) {
localStorage.setItem('wtw-token', response.token);
}
// 예시 2) message가 있는 경우
if (response.message === "valid user"){
alert("로그인에 성공하셨습니다")
}
})
Network
패널의 기능Application
패널의 기능:: 어떤 데이터를 어디에 저장하면 좋을까?
❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리.
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)")
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie
removeItem
, clear
등등의 공통 메소드 존재