Post on 14-Jul-2015
WEB����������� ������������������ UI����������� ������������������ 디버깅
WEBUI����������� ������������������ Advanced����������� ������������������ ����������� ������������������ |����������� ������������������ ����������� ������������������ ����������� ������������������ 2주차
목표
웹����������� ������������������ UI����������� ������������������ 개발자에게����������� ������������������ 디버깅이����������� ������������������ 어떤����������� ������������������ 것이����������� ������������������ 왜����������� ������������������ 필요한지����������� ������������������ 안다.����������� ������������������
크롬����������� ������������������ 개발자도구의����������� ������������������ Source����������� ������������������ 탭을����������� ������������������ 통해����������� ������������������ 문제를����������� ������������������ 해결할����������� ������������������ 수����������� ������������������ 있다
먼저����������� ������������������ 강의����������� ������������������ 설명
웹����������� ������������������ UI����������� ������������������ 개발단계에서,����������� ������������������ 어떤����������� ������������������ 디버깅����������� ������������������ 도구가����������� ������������������ 필요할까?
웹����������� ������������������ UI����������� ������������������ 개발의����������� ������������������ 특성을����������� ������������������ 먼저����������� ������������������ 알아보자
컴파일형����������� ������������������ 언어 인터프리터����������� ������������������ 언어VS.
런타임����������� ������������������ 환경에서����������� ������������������ 발생한다.
인터프리터����������� ������������������ 언어는����������� ������������������ 런타임����������� ������������������ 단계에서����������� ������������������ ����������� ������������������ 오류를����������� ������������������ 쉽게����������� ������������������ 찾을����������� ������������������ 수����������� ������������������ 있어야����������� ������������������ 한다
브라우저����������� ������������������ :����������� ������������������ “그래?����������� ������������������ 그럼����������� ������������������ 내가����������� ������������������ 동작하는����������� ������������������ 걸����������� ������������������ 다����������� ������������������ 보여주면����������� ������������������ 되나”
브라우저가����������� ������������������ 하는����������� ������������������ 놀라운����������� ������������������ 일들����������� ������������������ !
렌더링����������� ������������������ 엔진,����������� ������������������ 자바스크립트����������� ������������������ 해석,����������� ������������������ 통신
Image : http://helloworld.naver.com/helloworld/59361
HTML,����������� ������������������ CSS,����������� ������������������ JavaScript����������� ������������������ 해석����������� ������������������ 후����������� ������������������ 렌더트리를����������� ������������������ 만들어����������� ������������������ 화면에����������� ������������������ painting
Image : http://helloworld.naver.com/helloworld/59361
HTML,����������� ������������������ CSS,����������� ������������������ JavaScript����������� ������������������ 해석����������� ������������������ 콘텐츠와����������� ������������������ 스타일����������� ������������������ 정보����������� ������������������ 결합해서����������� ������������������ 화면에����������� ������������������ painting
Image : http://helloworld.naver.com/helloworld/59361
JavaScript����������� ������������������ Syntax����������� ������������������ 오류가����������� ������������������ 나요!����������� ������������������ 어디가����������� ������������������ 문제죠?����������� ������������������
Ajax����������� ������������������ 통신을����������� ������������������ 했지만����������� ������������������ 응답이����������� ������������������ 없는����������� ������������������ 거����������� ������������������ 같습니다.����������� ������������������
배경색이����������� ������������������ 표현되지����������� ������������������ 않아요?����������� ������������������ 어쩌된����������� ������������������ 거죠?����������� ������������������
로딩����������� ������������������ 화면이����������� ������������������ 너무����������� ������������������ 느립니다..����������� ������������������ 뭐가����������� ������������������ 문제죠.
그렇게����������� ������������������ 잘����������� ������������������ 동작되다가..
Image : http://helloworld.naver.com/helloworld/59361
JavaScript����������� ������������������ Syntax����������� ������������������ 오류가����������� ������������������ 나요!����������� ������������������ 어디가����������� ������������������ 문제죠?����������� ������������������
Ajax����������� ������������������ 통신을����������� ������������������ 했지만����������� ������������������ 응답이����������� ������������������ 없는����������� ������������������ 거����������� ������������������ 같습니다.����������� ������������������
배경색이����������� ������������������ 표현되지����������� ������������������ 않아요?����������� ������������������ 어쩌된����������� ������������������ 거죠?����������� ������������������
로딩����������� ������������������ 화면이����������� ������������������ 너무����������� ������������������ 느립니다..����������� ������������������ 뭐가����������� ������������������ 문제죠.
JavaScript����������� ������������������ 디버깅����������� ������������������
network상태와����������� ������������������ Ajax����������� ������������������ 디버깅����������� ������������������
css����������� ������������������ 해석된����������� ������������������ 결과����������� ������������������ 들여다보기����������� ������������������
network����������� ������������������ 진단,����������� ������������������ JavaScript����������� ������������������ 프로파일링
해결책문제
Image : http://helloworld.naver.com/helloworld/59361
JavaScript����������� ������������������ 디버깅����������� ������������������
network상태와����������� ������������������ Ajax����������� ������������������ 디버깅����������� ������������������
css����������� ������������������ 해석된����������� ������������������ 결과����������� ������������������ 들여다보기����������� ������������������
network����������� ������������������ 진단,����������� ������������������ JavaScript����������� ������������������ 프로파일링
Sources����������� ������������������ 탭
Image : http://helloworld.naver.com/helloworld/59361
JavaScript����������� ������������������ 디버깅����������� ������������������
network상태와����������� ������������������ Ajax����������� ������������������ 디버깅����������� ������������������
css����������� ������������������ 해석된����������� ������������������ 결과����������� ������������������ 들여다보기����������� ������������������
network����������� ������������������ 진단,����������� ������������������ JavaScript����������� ������������������ 프로파일링
Image : http://helloworld.naver.com/helloworld/59361
메뉴����������� ������������������ 설명����������� ������������������ !
디버깅����������� ������������������ ����������� ������������������ breakpoints����������� ������������������ ����������� ������������������ watch����������� ������������������ expressions����������� ������������������ ����������� ������������������ scope����������� ������������������ variables����������� ������������������ ����������� ������������������ ����������� ������������������
Breakpoints����������� ������������������ ����������� ������������������ DOM����������� ������������������ Breakpoints����������� ������������������ ����������� ������������������ XHR����������� ������������������ Breakpoints����������� ������������������ ����������� ������������������ Event����������� ������������������ Breakpoints����������� ������������������
!
live����������� ������������������ edit
End ;-D