JavaScript Debugging (동영상강의자료)

22
WEB UI 디버깅 WEBUI Advanced | 2주차
  • Upload

    -
  • Category

    Software

  • view

    384
  • download

    0

Transcript of JavaScript Debugging (동영상강의자료)

Page 1: JavaScript Debugging (동영상강의자료)

WEB����������� ������������������  UI����������� ������������������  디버깅

WEBUI����������� ������������������  Advanced����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  2주차

Page 2: JavaScript Debugging (동영상강의자료)

목표

웹����������� ������������������  UI����������� ������������������  개발자에게����������� ������������������  디버깅이����������� ������������������  어떤����������� ������������������  것이����������� ������������������  왜����������� ������������������  필요한지����������� ������������������  안다.����������� ������������������  

크롬����������� ������������������  개발자도구의����������� ������������������  Source����������� ������������������  탭을����������� ������������������  통해����������� ������������������  문제를����������� ������������������  해결할����������� ������������������  수����������� ������������������  있다

Page 3: JavaScript Debugging (동영상강의자료)

먼저����������� ������������������  강의����������� ������������������  설명

Page 4: JavaScript Debugging (동영상강의자료)

웹����������� ������������������  UI����������� ������������������  개발단계에서,����������� ������������������  어떤����������� ������������������  디버깅����������� ������������������  도구가����������� ������������������  필요할까?

Page 5: JavaScript Debugging (동영상강의자료)

웹����������� ������������������  UI����������� ������������������  개발의����������� ������������������  특성을����������� ������������������  먼저����������� ������������������  알아보자

Page 6: JavaScript Debugging (동영상강의자료)
Page 7: JavaScript Debugging (동영상강의자료)

컴파일형����������� ������������������  언어 인터프리터����������� ������������������  언어VS.

Page 8: JavaScript Debugging (동영상강의자료)
Page 9: JavaScript Debugging (동영상강의자료)

런타임����������� ������������������  환경에서����������� ������������������  발생한다.

Page 10: JavaScript Debugging (동영상강의자료)

인터프리터����������� ������������������  언어는����������� ������������������  런타임����������� ������������������  단계에서����������� ������������������  ����������� ������������������  오류를����������� ������������������  쉽게����������� ������������������  찾을����������� ������������������  수����������� ������������������  있어야����������� ������������������  한다

Page 11: JavaScript Debugging (동영상강의자료)

브라우저����������� ������������������  :����������� ������������������  “그래?����������� ������������������  그럼����������� ������������������  내가����������� ������������������  동작하는����������� ������������������  걸����������� ������������������  다����������� ������������������  보여주면����������� ������������������  되나”

Page 12: JavaScript Debugging (동영상강의자료)

브라우저가����������� ������������������  하는����������� ������������������  놀라운����������� ������������������  일들����������� ������������������  !

Page 13: JavaScript Debugging (동영상강의자료)

렌더링����������� ������������������  엔진,����������� ������������������  자바스크립트����������� ������������������  해석,����������� ������������������  통신

Image : http://helloworld.naver.com/helloworld/59361

Page 14: JavaScript Debugging (동영상강의자료)

HTML,����������� ������������������  CSS,����������� ������������������  JavaScript����������� ������������������  해석����������� ������������������  후����������� ������������������  렌더트리를����������� ������������������  만들어����������� ������������������  화면에����������� ������������������  painting

Image : http://helloworld.naver.com/helloworld/59361

Page 15: JavaScript Debugging (동영상강의자료)

HTML,����������� ������������������  CSS,����������� ������������������  JavaScript����������� ������������������  해석����������� ������������������  콘텐츠와����������� ������������������  스타일����������� ������������������  정보����������� ������������������  결합해서����������� ������������������  화면에����������� ������������������  painting

Image : http://helloworld.naver.com/helloworld/59361

JavaScript����������� ������������������  Syntax����������� ������������������  오류가����������� ������������������  나요!����������� ������������������  어디가����������� ������������������  문제죠?����������� ������������������  

Ajax����������� ������������������  통신을����������� ������������������  했지만����������� ������������������  응답이����������� ������������������  없는����������� ������������������  거����������� ������������������  같습니다.����������� ������������������  

배경색이����������� ������������������  표현되지����������� ������������������  않아요?����������� ������������������  어쩌된����������� ������������������  거죠?����������� ������������������  

로딩����������� ������������������  화면이����������� ������������������  너무����������� ������������������  느립니다..����������� ������������������  뭐가����������� ������������������  문제죠.

그렇게����������� ������������������  잘����������� ������������������  동작되다가..

Page 16: JavaScript Debugging (동영상강의자료)

Image : http://helloworld.naver.com/helloworld/59361

JavaScript����������� ������������������  Syntax����������� ������������������  오류가����������� ������������������  나요!����������� ������������������  어디가����������� ������������������  문제죠?����������� ������������������  

Ajax����������� ������������������  통신을����������� ������������������  했지만����������� ������������������  응답이����������� ������������������  없는����������� ������������������  거����������� ������������������  같습니다.����������� ������������������  

배경색이����������� ������������������  표현되지����������� ������������������  않아요?����������� ������������������  어쩌된����������� ������������������  거죠?����������� ������������������  

로딩����������� ������������������  화면이����������� ������������������  너무����������� ������������������  느립니다..����������� ������������������  뭐가����������� ������������������  문제죠.

JavaScript����������� ������������������  디버깅����������� ������������������  

network상태와����������� ������������������  Ajax����������� ������������������  디버깅����������� ������������������  

css����������� ������������������  해석된����������� ������������������  결과����������� ������������������  들여다보기����������� ������������������  

network����������� ������������������  진단,����������� ������������������  JavaScript����������� ������������������  프로파일링

해결책문제

Page 17: JavaScript Debugging (동영상강의자료)
Page 18: JavaScript Debugging (동영상강의자료)

Image : http://helloworld.naver.com/helloworld/59361

JavaScript����������� ������������������  디버깅����������� ������������������  

network상태와����������� ������������������  Ajax����������� ������������������  디버깅����������� ������������������  

css����������� ������������������  해석된����������� ������������������  결과����������� ������������������  들여다보기����������� ������������������  

network����������� ������������������  진단,����������� ������������������  JavaScript����������� ������������������  프로파일링

Page 19: JavaScript Debugging (동영상강의자료)

Sources����������� ������������������  탭

Page 20: JavaScript Debugging (동영상강의자료)

Image : http://helloworld.naver.com/helloworld/59361

JavaScript����������� ������������������  디버깅����������� ������������������  

network상태와����������� ������������������  Ajax����������� ������������������  디버깅����������� ������������������  

css����������� ������������������  해석된����������� ������������������  결과����������� ������������������  들여다보기����������� ������������������  

network����������� ������������������  진단,����������� ������������������  JavaScript����������� ������������������  프로파일링

Page 21: JavaScript Debugging (동영상강의자료)

Image : http://helloworld.naver.com/helloworld/59361

메뉴����������� ������������������  설명����������� ������������������  !

디버깅����������� ������������������  ����������� ������������������   breakpoints����������� ������������������  ����������� ������������������   watch����������� ������������������  expressions����������� ������������������  ����������� ������������������   scope����������� ������������������  variables����������� ������������������  ����������� ������������������   ����������� ������������������  

Breakpoints����������� ������������������  ����������� ������������������   DOM����������� ������������������  Breakpoints����������� ������������������  ����������� ������������������   XHR����������� ������������������  Breakpoints����������� ������������������  ����������� ������������������   Event����������� ������������������  Breakpoints����������� ������������������  

!

live����������� ������������������  edit

Page 22: JavaScript Debugging (동영상강의자료)

End ;-D