{"data":{"site":{"siteMetadata":{"title":"lastrites2018","author":"lastrites2018","siteUrl":"https://lastrites2018.netlify.com","comment":{"disqusShortName":"","utterances":"lastrites2018/gatsby-first-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"607e4562-52ad-515a-9c5f-ed4af8a0ccc3","excerpt":"익숙하지 않은 debugger와 좀 더 친해지기 console.log에서 벗어나기! 도움 받을 레퍼런스 <해외> The 14 JavaScript debugging tips you probably didn’t know  https://raygun.com/javascript-debugging-tips Learn How To Debug JavaScript with Chrome DevTools  https://codeburst.io/learn-how-to-debug-javascript-with…","html":"<h2 id=\"익숙하지-않은-debugger와-좀-더-친해지기\"><a href=\"#%EC%9D%B5%EC%88%99%ED%95%98%EC%A7%80-%EC%95%8A%EC%9D%80-debugger%EC%99%80-%EC%A2%80-%EB%8D%94-%EC%B9%9C%ED%95%B4%EC%A7%80%EA%B8%B0\" aria-label=\"익숙하지 않은 debugger와 좀 더 친해지기 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>익숙하지 않은 debugger와 좀 더 친해지기</h2>\n<p>console.log에서 벗어나기!</p>\n<h2 id=\"도움-받을-레퍼런스\"><a href=\"#%EB%8F%84%EC%9B%80-%EB%B0%9B%EC%9D%84-%EB%A0%88%ED%8D%BC%EB%9F%B0%EC%8A%A4\" aria-label=\"도움 받을 레퍼런스 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>도움 받을 레퍼런스</h2>\n<p>&#x3C;해외></p>\n<p>The 14 JavaScript debugging tips you probably didn’t know <a href=\"https://raygun.com/javascript-debugging-tips\">https://raygun.com/javascript-debugging-tips</a></p>\n<p>Learn How To Debug JavaScript with Chrome DevTools <a href=\"https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db\">https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db</a></p>\n<p>&#x3C;국내></p>\n<p>[자바스크립트] debugger 활용법 <a href=\"http://kim-solshar.tistory.com/43\">http://kim-solshar.tistory.com/43</a></p>\n<p>자바스크립트 디버거 <a href=\"http://0taeng.tistory.com/21\">http://0taeng.tistory.com/21</a></p>\n<p><a href=\"http://shiren.github.io/2016-03-23-%EC%9B%B9%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC/\">웹 개발자를 위한 크롬 개발자도구</a></p>\n<p><a href=\"http://mkil.tistory.com/389\">http://mkil.tistory.com/389</a></p>\n<blockquote>\n<p>매번 확인하기 귀찮다면 **변수를 Scope에 등록해 놓고 확인해 볼 수도 있습니다. cope 탭에서 변수를 추가하면 변수들의 값이 할당되어지는 것을 실시간으로 확인 가능하며, Scope > Global 변수의 값도 확인 가능합니다. Watch 탭에서 +버튼으로 변수이름을 입력하여 넣으면 디버깅 하는 과정에서 해당 변수가 어떤 값을 갖고 있는지를 계속해서 관찰할 수 있는 것입니다.</p>\n</blockquote>","frontmatter":{"title":"debugger","date":"September 09, 2018"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/til/20180909 debugger/","previous":{"fields":{"slug":"/til/20180906 immersive 준비 Basic JavaScript Review/"},"frontmatter":{"title":"immersive 준비 Basic JavaScript Review","category":"TIL"}},"next":{"fields":{"slug":"/til/20180910 ES6 let, const, Template literal/"},"frontmatter":{"title":"ES6 let, const, Template literal","category":"TIL"}}}}