# 개발자도구

100개의 포스트
post-thumbnail

누가 스마트캠퍼스 쓰라고 칼들고 협박함? (feat. 크롬 개발자도구, 크롬 확장프로그램)

안녕하세요, 저는 숭실대학교를 다니고 있는 학생입니다. 대부분의 대학교에서는 온라인 러닝 시스템이 존재할텐데, 숭실대학교에서는 스마트캠퍼스LMS (Canvas기반 신규 LMS, LearningX(러닝엑스)라고 숭실대는 말하네요)를 이용하고 있습니다 LMS 소개

2022년 11월 18일
·
5개의 댓글
·
post-thumbnail

웹 퍼블리싱 정리

Figma, Photoshop 등 그래픽 리소스를 html + css + js 로 변환해 브라우저에 표현하는 것.디자인 리소스 : Photoshop, PowerPoint 와 같이 전통적인 툴에서 Sketch, Zeplin, Figma, Protopie 처럼 최근 많

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

[JS] 개발자 도구

개발자 도구에 있는 다양한 패널의 종류와 기능을 파악한다.개발자 도구는 브라우저에서 제공하는 하나의 tool이다. ex) Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구 등웹 사이트를 즉각적으로 수정하고 문제 발생 시 원인을 파악하여 빠른 속도로

2022년 10월 24일
·
0개의 댓글
·
post-thumbnail

[공통]개발자도구_10.21~

웹브라우저의 자바스크립트 콘솔로 실행화면에 접근하여 직접 다뤄볼 수 있다

2022년 10월 21일
·
0개의 댓글
·
post-thumbnail

콘솔 창에서 실제 코드 대신 bundle.js만 보이는 문제 해결

콘솔 창에 실제 코드가 아닌 bundle.js만 뜨는 현상을 해결해보자

2022년 10월 9일
·
2개의 댓글
·
post-thumbnail

[기타] 개발자도구 - Application panel

브라우저 저장소의 기능현재 로딩된 웹 페이지에서 사용된 모든 리소스를 검사할 수 있는 패널(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)Storage: 브라우저의 저장소Local Storage: 로컬스토리지의 데이터는 사용자가 지우지 않는 이상

2022년 9월 23일
·
0개의 댓글
·

[기타] 개발자도구 - Network panel

http 네트워크 통신 정보API 크롤링, 페이지 로딩 성능 테스트(리소스 가져오는 순서, 시간, 요청과 응답)이미지, 영상 등의 소스 (mock data 활용) \-> 웹페이지와 서버 사이에서의 데이터의 흐름을 분석preview를 통해 보면 다음과 같은 항목을 API

2022년 9월 23일
·
0개의 댓글
·

[기타] 개발자도구 - Console panel, Sources panel

Console panel 자바스크립트 코드 즉시 실행 디버깅 console 창에서 다음 줄에 코드를 작성하고 싶을 때 enter 대신 shift+enter이용 console 창에 여러줄 있을 때 마지막 줄이 return 된다. 다른 pane

2022년 9월 23일
·
0개의 댓글
·

[기타] 개발자도구-Elements panel

페이지 레이아웃 html 확인스타일(css) 검사 및 편집\-> Elements panal에서 내용 수정해보고 원래 코드에 복사해서 붙여넣기도 한다.section tag는 semantic tag중의 하나로 HTML 문서에 포함된 독립적인 섹션(section)을 정의할

2022년 9월 23일
·
0개의 댓글
·

개발자도구 - debugger 사용법

브라우저에서 html 파일을 실행한다.개발자 도구를 열어 source 탭으로 들어간다.디버깅을 시작하고 싶은 줄을 클릭하거나, 시작하고자 하는 줄 앞에 debugger; 를 작성해주어서 breakpoint를 걸어준다.새로고침을 하면, breakpoint에서 실행이 멈춘

2022년 9월 6일
·
0개의 댓글
·

Network panel

서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구이며 이미지나 영상 등각 소스들을 불러올 때 속도, 응답 상태 등 네트워크 측면에서 확인 가능하며, 문제 시 비교, 분석을 할 수 있게 도움을 주는 도구이다.개발자도구가 열려 있는 동안의 실제

2022년 8월 19일
·
0개의 댓글
·

개발자도구-네트워크 패널

개발자도구는 브라우저에 내장된 웹 개발자 도구 모음이다.(예 : Chrome 개발자 도구, IE 개발자 도구, Safari 개발자 도구. etc)웹 사이트를 즉각적으로 수정할 수 있다.문제 발생시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들수 있도록 도와 준다.

2022년 7월 24일
·
0개의 댓글
·
post-thumbnail

HTML 개발자 도구?

웹 브라우저에서 지원하는 강력한 도구 툴웹 페이지에서 사용된 HTML , CSS등 소스코드를 사용자에게 보여줍니다.모바일 모니터링 네트워크 상태점검 스크립트 명령어 HTML CSS 코드 확인 등개발자에게 편의성을 제공합니다.

2022년 7월 1일
·
0개의 댓글
·
post-thumbnail

💡 개발자 도구 - <Elements, Console, Network, Application> Panel 기능 정리

Chrome 기준.Why “Chrome”? 가장 많이 사용하는 브라우저: html / css 코드를 분석, 수정할 수 있는 panel.DOM과 style 요소(css)를 조작하여 사이트의 레이아웃, 디자인을 분석할 수 있다. ➪ viewing and changin

2022년 6월 24일
·
0개의 댓글
·
post-thumbnail

Javascript typeof 연산자

원시 자료형string, number, boolean, undefinedtypeof JavaScript에는 typeof 연산자로 타입을 확인해볼 수 있다.타입마다 다른 속성과 메서드가 있다.typeof 연산자 사용법typeof 값 ;typeof 뒤에 타입을 알고자 하는

2022년 6월 24일
·
0개의 댓글
·
post-thumbnail

[개발자도구]패널(panel)

왜 개발자들은 수많은 브라우저 중에서 크롬을 쓸까?

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

개발자도구(Element, Console, Network, Application)

element 패널의 기능은?개발자 도구를 열었을 때 가장 먼저 보이는 패널로, html과 css가 어떻게 적용되고 있는지를 확인할 수 있는 패널이다.나는 주로 css속성이 잘 적용되었나 확인할 때 element를 사용했는데 이런식으로 커서를 가져다 대면 style값이

2022년 5월 27일
·
0개의 댓글
·
post-thumbnail

개발자 도구(Network 탭)

개발자 도구 상 Network탭에 대한 간략한 정보

2022년 5월 27일
·
0개의 댓글
·

Console panel

과제 안내Console 패널의 기능은?화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?다른 패널(ex. Elements

2022년 4월 29일
·
0개의 댓글
·

개발자도구(console 패널)

Console 패널의 기능은? 코드가 올바른 순서로 실행되고 있는지 확인합니다. 특정 시점의 변수 값을 검사합니다. console 에서 JavaScript를 실행하여 검사 중인 페이지와 상호 작용할 수 있습니다. console은 페이지의 에 대한 전체 액세스 권

2022년 4월 29일
·
0개의 댓글
·