개발자 도구 단축키 제한하기
각 브라우저별 개발자 도구 단축키와 개발자 도구 열기를 제한하는 방법을 알아본다.
개발자 도구 Developer Tools
개발자가 SW를 생성, 테스트, 디버깅할 수 있게 해주는 프로그램으로, 브라우저는 웹 사이트를 검사할 수 있는 통합 개발자 도구를 제공한다.
웹 개발 도구는 웹페이지를 직접 만드는데 도움이 되며 웹 앱이나 사용자 인터페이스 (UI)를 테스트하는 데 사용된다.
개발자는 개발자 도구를 사용하여 HTML, CSS, DOM, JavaScript 및 웹 브라우저에서 처리하는 기타 구성 요소를 포함한 다양한 웹 기술을 사용해 작업할 수 있다.
개발자 도구 + 페이지 소스 보기 단축키
| 단축키 | 열리는 탭 |
|---|---|
| F12 | Elements |
| Ctrl (Command) + Shift (Opt) + I | Elements |
| Ctrl (Command) + Shift (Opt) + C | Elements |
| Ctrl (Command) + Shift (Opt) + J | Console |
| Ctrl (Command) + U | 페이지 소스 보기 |
| Ctrl (Command) + S | 저장 |
마우스로 개발자 도구 열기
마우스로 개발자 도구를 여는 방법
위 방법은 상단 메뉴를 통해 개발자 도구를 여는 방법이기 때문에 좌클릭 자체를 막는 게 아니라면 JS 코드로 막을 수 있는 방법이 없다.
개발자 도구 Tap 소개
필자가 주로 사용하는 탭을 소개한다.
1. Elements 요소
MDN 요소
개발자 도구를 열었을 때 기본적으로 선택되는 탭이다. 여기서 웹 페이지 구성인 DOM과 CSS를 확인 할 수 있으며, HTML 코드와 CSS 코드를 실시간으로 수정할 수 있다. 단, 테스트 용도이기 때문에 저장되지 않으며 새로고침하면 원래의 코드로 돌아간다.
Ctrl + Shift + C를 누르면 따로 요소 검사 기능 버튼을 클릭하지 않아도 바로 검사 가능하다.
Styles의 경우, CSS 파일의 우선 순위에 따라 나온다. 위에서부터 우선 순위가 높은 순으로 나열된다.
스타일 중 사용자 에이전트 스타일시트 User Agent Stylesheet는 브라우저의 기본 스타일을 의미한다.
2. Console 콘솔
오늘의 집 콘솔 로그
입력 도구를 통해 브라우저의 동작을 조절한다. 여기서는 JavaScript 코드를 즉시 실행할 수 있다.
3. Sources 소스
MDN 소스
현재 페이지를 구성하는 웹 리소스를 확인할 수 있다.
특정 부분 혹은 파일을 선택하면 해당 리소스의 상세를 확인할 수 있으며 하단에서 디버깅 정보를 볼 수 있다.
즉, 웹페이지의 소스코드를 확인할 때 사용하는 탭이며, 현재 파일에 로드된 모든 도메인을 확인할 수 있다.
4. Network 네트워크
MDN 네트워크
개발을 하면서 가장 많이 볼 탭이다.
서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 돕는 도구로, 백엔드와 프론트엔드, 사용자 간의 통신을 보여주는 곳이다. 때문에 API가 정상적으로 요청/응답 되었는지 확인하거나, 이미지, 영상 소스가 정상적으로 로드되었는지 등을 확인하기 위해 사용한다.
- Header 헤더 : HTTP 요청/응답 헤더 확인
- Payload : HTTP POST/PUT 메소드일 때 요청 Body에 담아 보낼 데이터 확인
- Preview : HTTP 응답 Body의 데이터를 확인
- Response : HTTP 응답 Body의 원본 데이터 확인
- Initiator : HTTP 요청을 발생시킨 소스 코드 위치 확인
- Timing : HTTP 요청 시작 시간, 대기 시간, 응답 시간 등 타이밍 확인 가능
- Cookies : 쿠키 데이터 확인인
5. Performance 성능
MDN 성능
웹 페이지가 로드되는 데 걸리는 시간, 자원 사용량, 네트워크 요청 등을 모니터링함으로써 웹 페이지의 성능을 분석하고 최적화할 때 사용한다.
6. Memory 메모리
MDN 메모리
웹 페이지가 차지하는 메모리 관련 정보를 열람할 때 쓰인다. 메모리 누수나 속도 저하, 프리징 현상을 관찰할 수 있다.
메모리 프로파일 도구인 스냅샷 기능을 사용해 현재 페이지의 메모리 상태를 열람할 수 있다.
7. Application 애플리케이션
브라우저 저장소 기능을 담당한다. local storage / session storage / cookie에 무엇이 들어있는지 확인할 수 있다.
우선, Local Storage와 Session Storage는 Web Storage로 묶을 수 있는데, Web Storage는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 기능으로, 정보가 서버에 전송되지 않는다. 따라서, 개인정보 등의 정보는 클라이언트 접근이 가능한 Web Storage에 저장하지 않는 것이 좋다.
- Local Storage : 브라우저를 종료해도 유지되는 데이터로, 사용자가 데이터를 지우지 않는 이상 영구적으로 보관됨. 같은 도메인이라면 모두 동일한 스토리지를 사용함. 자동 로그인 등을 위해 사용함
- Session Storage : 브라우저 종료 시 삭제됨. 영구성을 보장하지 않음. 같은 도메인이어도 각 세션마다 새로운 스토리지를 생성하고 폐기함. 일회성 로그인 등 잠시간 필요한 정보를 보관할 때 사용함
- Cookie : 대략 4KB까지의 데이터를 저장할 수 있으며 최대 300개까지 저장 가능함. 유효 기가닝 존재함. 문자열만 저장 가능함. 쿠키 설정 시 모든 웹 요청이 쿠키 정보와 함께 서버로 전송됨. 일정 기간 팝업을 띄우지 않는 등의 기간 설정을 하는 기능이 있을 때 사용함
참고
개발자 도구 제한
개발자 도구를 열 수 없도록 제한하는 방법은 각 단축키 입력을 막는 방법이 있다. (여기에 Cntl + U도 포함하면 단축키를 통한 페이지 소스 열기도 막을 수 있다.)
1
2
3
4
5
6
7
8
9
// F12 / ctrl+shift+i / ctrl+shift+c / ctrl+shift+j 입력 방지
$(document).ready(function() {
$(document).bind('keydown', function(e) {
if (e.keyCode === 123 || (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 67 || e.keyCode === 74))) {
e.preventDefault();
e.returnValue = false;
}
});
})
참고
자바스크립트 키코드
스크립트 모드 (페이지 소스 보기)
구글 메인 페이지 소스
HTML, CSS 및 웹 페이지에 포함된 원본 스크립트를 볼 수 있다. 이를 통해 웹 페이지 구조를 이해하거나 특정 코드를 찾을 수 있다.
페이지 소스 보기 제한
마우스 우클릭으로 페이지 소스 보기 여는 방법
우클릭을 통해 페이지 소스 보기 창을 진입할 수 있기 때문에 우클릭을 막는다.
1
2
3
4
5
6
7
// 우측 클릭 방지
document.onmousedown = disableclick;
function disableclick(event) {
if(event.butten === 2) {
return false;
}
}