JavaScript Debugging (수업자료)

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

    -
  • Category

    Software

  • view

    339
  • download

    4

Transcript of JavaScript Debugging (수업자료)

Page 1: JavaScript Debugging (수업자료)

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

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

Page 2: JavaScript Debugging (수업자료)

목표

sources을����������� ������������������  충분히����������� ������������������  활용하면서����������� ������������������  디버깅����������� ������������������  도구를����������� ������������������  활용해����������� ������������������  문제를����������� ������������������  해결할����������� ������������������  수����������� ������������������  있다.����������� ������������������  

비동기����������� ������������������  상황에서도����������� ������������������  디버깅����������� ������������������  할����������� ������������������  수����������� ������������������  있다.����������� ������������������  

sources탭����������� ������������������  이외����������� ������������������  탭의����������� ������������������  기능도����������� ������������������  부분적으로����������� ������������������  이해하고����������� ������������������  있고,����������� ������������������  어떻게����������� ������������������  찾아서����������� ������������������  공부

하면����������� ������������������  되는����������� ������������������  줄����������� ������������������  알고����������� ������������������  있다.

Page 3: JavaScript Debugging (수업자료)

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

Page 4: JavaScript Debugging (수업자료)

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

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

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

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

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

Page 5: JavaScript Debugging (수업자료)

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

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

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

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

!

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

Page 6: JavaScript Debugging (수업자료)

디버깅����������� ������������������  실습

Page 7: JavaScript Debugging (수업자료)

espn.go.com����������� ������������������  ����������� ������������������  오류����������� ������������������  원인����������� ������������������  찾기

Page 8: JavaScript Debugging (수업자료)

박민근����������� ������������������  입력����������� ������������������  후����������� ������������������  ����������� ������������������  엔터를����������� ������������������  치거나����������� ������������������  ‘+’버튼을����������� ������������������  누름

박민근����������� ������������������  추가����������� ������������������  됨����������� ������������������  ‘X’����������� ������������������  눌러서����������� ������������������  삭제가능 박민근����������� ������������������  삭제����������� ������������������  됨

Page 9: JavaScript Debugging (수업자료)

‘ㅍ’����������� ������������������  ����������� ������������������  ����������� ������������������  누르면 임의����������� ������������������  커플이����������� ������������������  형성됨

Page 10: JavaScript Debugging (수업자료)

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

git clone https://github.com/nigayo/UIA.git

Page 11: JavaScript Debugging (수업자료)

>ls!PairPicker.html PairPickerMain.css PairPickerMain.js!!

Page 12: JavaScript Debugging (수업자료)

문제1.����������� ������������������  ����������� ������������������  x����������� ������������������  버튼이����������� ������������������  darkgray가����������� ������������������  아닌����������� ������������������  원인����������� ������������������  찾기

Page 13: JavaScript Debugging (수업자료)

문제2.����������� ������������������  ����������� ������������������  ����������� ������������������  enter����������� ������������������  를����������� ������������������  눌렀지만����������� ������������������  추가되지����������� ������������������  않는����������� ������������������  문제����������� ������������������  찾기

Page 14: JavaScript Debugging (수업자료)

문제3.����������� ������������������  ����������� ������������������  ����������� ������������������  동일����������� ������������������  이름이����������� ������������������  중복되는����������� ������������������  문제����������� ������������������  찾기

Page 15: JavaScript Debugging (수업자료)

문제를����������� ������������������  해결하면서����������� ������������������  ����������� ������������������  !source탭에서����������� ������������������  live����������� ������������������  수정을����������� ������������������  했나요?����������� ������������������  !watch����������� ������������������  expressions����������� ������������������  ,����������� ������������������  Event����������� ������������������  Listener����������� ������������������  Breakpoints����������� ������������������  등을����������� ������������������  잘����������� ������������������  활용하고����������� ������������������  있나요?����������� ������������������  

Page 16: JavaScript Debugging (수업자료)

비동기상황에서의����������� ������������������  디버깅����������� ������������������  실습

Page 17: JavaScript Debugging (수업자료)

비동기상황에서의����������� ������������������  디버깅

function call(num) {! debugger;! console.log("call called " + num);!}!!function callback() {! debugger;! console.log("timeout 1000"); !}!!function run() {! call(1);!! setTimeout(function() {! callback();! }, 1000);!! call(2);!}!!run();

Page 18: JavaScript Debugging (수업자료)

callstack����������� ������������������  을����������� ������������������  보자����������� ������������������  !두개는����������� ������������������  어떻게����������� ������������������  다른가?

function call(num) {! debugger;! console.log("call called " + num);!}!!function callback() {! debugger;! console.log("timeout 1000"); !}!!function run() {! call(1);!! setTimeout(function() {! callback();! }, 1000);!! call(2);!}!!run();

Page 19: JavaScript Debugging (수업자료)

����������� ������������������  async����������� ������������������  옵션����������� ������������������  후����������� ������������������  비교

function call(num) {! debugger;! console.log("call called " + num);!}!!function callback() {! debugger;! console.log("timeout 1000"); !}!!function run() {! call(1);!! setTimeout(function() {! callback();! }, 1000);!! call(2);!}!!run();

Page 20: JavaScript Debugging (수업자료)

Call����������� ������������������  Stack����������� ������������������  Async����������� ������������������  체크해제.����������� ������������������  

amazon.com����������� ������������������  접속����������� ������������������  

XHR����������� ������������������  Breakpoints����������� ������������������  ����������� ������������������  -����������� ������������������  any����������� ������������������  XHR����������� ������������������  

검색어����������� ������������������  입력����������� ������������������  후����������� ������������������  자동완성����������� ������������������  노출����������� ������������������  

XHR����������� ������������������  callback����������� ������������������  함수����������� ������������������  찾기.

Page 21: JavaScript Debugging (수업자료)

Call����������� ������������������  Stack����������� ������������������  Async����������� ������������������  체크해제.����������� ������������������  

amazon.com����������� ������������������  접속����������� ������������������  

XHR����������� ������������������  Breakpoints����������� ������������������  ����������� ������������������  -����������� ������������������  any����������� ������������������  XHR����������� ������������������  

검색어����������� ������������������  입력����������� ������������������  후����������� ������������������  자동완성����������� ������������������  노출����������� ������������������  

XHR����������� ������������������  callback����������� ������������������  함수����������� ������������������  찾기.

callback����������� ������������������  함수에����������� ������������������  breakpoint����������� ������������������  ����������� ������������������  

Async����������� ������������������  체크한����������� ������������������  후����������� ������������������  확인

Page 22: JavaScript Debugging (수업자료)

다른����������� ������������������  탭

Page 23: JavaScript Debugging (수업자료)

sources timeline console 그����������� ������������������  외

Page 24: JavaScript Debugging (수업자료)

sources을����������� ������������������  충분히����������� ������������������  활용하면서����������� ������������������  디버깅����������� ������������������  도구를����������� ������������������  활용해����������� ������������������  문제를����������� ������������������  해결할����������� ������������������  수����������� ������������������  있다.����������� ������������������  

비동기����������� ������������������  상황에서도����������� ������������������  디버깅����������� ������������������  할����������� ������������������  수����������� ������������������  있다.����������� ������������������  

sources탭����������� ������������������  이외����������� ������������������  탭의����������� ������������������  기능도����������� ������������������  부분적으로����������� ������������������  이해하고����������� ������������������  있고,����������� ������������������  어떻게����������� ������������������  찾아서����������� ������������������  공부

하면����������� ������������������  되는����������� ������������������  줄����������� ������������������  알고����������� ������������������  있다.

피드백

Page 25: JavaScript Debugging (수업자료)

End ;-D