Chrome DevTools의 각 탭 살펴보기
·
🥁 Frontend/🖼️ 브라우저
Elements 탭Styles- 특정 DOM element에 적용되고 있는 스타일을 확인할 수 있다- 가장 상단의 element.style 에 입력하는 스타일이 우선 적용된다- 우선 적용되는 이유는 inline style로 적용되기 때문이다. 따라서 !important로 이미 적용된 스타일에 영향을 끼치지 않는다 (아래 사진 참조) - ahoy 클래스에서 red !important 로 최우선 효과로 지정했기 때문에, element.style 에서 background를 blue로 변경하려고 해도 취소선이 그어지고 color는 여전히 red로 유지된다 Computed- 최종적으로 적용되는 스타일 확인 가능 Event Listeners- element에 적용된 이벤트 리스너 확인 가능 Console 탭- re..
Chrome Extension의 설정 파일, manifest
·
🥁 Frontend/🖼️ 브라우저
📍Manifest란?✅크롬 익스텐션의 설정 파일 역할로, 필수로 존재해야 한다- JSON 형식 (manifest.json 형태로 존재)- 익스텐션의 루트에 위치 📍Manifest  V3✅2023년 4월 현재 최신 버전- 2022년 1월부터 V2 버전의 새로운 앱 등록이 금지됨 📍Manifest  V3 포맷✅필수 프로퍼티- manifest_version- name- version ✅권장되는 프로퍼티- action- default_locale- icons- description 1. action : 크롬 우측 상단의 아이콘의 세부 정보를 담당하는 객체- default_icon : 우측 상단의 아이콘 이미지- default_title : 아이콘에 커서 올리면 표시할 타이틀- default_popup : ..
Chrome Web Store 개발자 등록하기
·
🥁 Frontend/🖼️ 브라우저
📍개요크롬 익스텐션을 만들고 스토어에 배포하기 위해서는 크롬 디벨로퍼 대시보드에 계정을 등록해야 한다 ✅크롬 웹스토어 소개 링크https://developer.chrome.com/docs/webstore/about_webstore/ What is the Chrome Web Store? - Chrome DevelopersAn explanation of the Chrome Web Store and why you might want to use it.developer.chrome.com 📍준비물- 크롬 웹스토어에 등록할 구글 계정- 5불 📍1. 계정 등록하기✅크롬 디벨로퍼 대시보드 링크https://chrome.google.com/webstore/developer/dashboard Chrome Web S..
크롬 브라우저 유용한 단축키 for Mac
·
🥁 Frontend/🖼️ 브라우저
📍창 관련새 창 열기: cmd + n시크릿 모드로 새 창 열기: cmd + chift + n창 최소화: cmd + m 📍탭 관련새 탭 열기: cmd + t이전에 닫은 탭을 닫은 순서대로 다시 열기: cmd + shift + t탭 이동: opt + cmd + N번째 탭으로 이동: cmd + 1 ~ 8마지막 탭으로 이동: cmd + 9뒤로 가기: cmd + 앞으로 가기: cmd + -> or ]탭 닫기: cmd + w 📍기타강력 새로고침: cmd + shift + r현재 페이지 북마크 저장: cmd + d