{"id":349,"date":"2015-05-28T12:10:48","date_gmt":"2015-05-28T12:10:48","guid":{"rendered":"http:\/\/dieter-steffen.de\/?p=349"},"modified":"2015-05-28T18:32:30","modified_gmt":"2015-05-28T18:32:30","slug":"javascript-debuggen-mit-google-chrome","status":"publish","type":"post","link":"https:\/\/dieter-steffen.de\/?p=349","title":{"rendered":"Javascript debuggen mit Google Chrome"},"content":{"rendered":"<h4>1. Vorbedingungen<\/h4>\n<p>Javascript muss &#8211; so weit ich das ausprobiert habe &#8211; in html eingebettet sein.\u00a0Eine reine Javascriptdatei xxx.js zu debuggen habe ich pers\u00f6nlich nicht hinbekommen.<br \/>\nDie html Datei mit eingebetteten Javascript sieht zum Beispiel wie folgt aus:<\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;JavaScript&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nvar i1 = 15;\r\nvar i2 = 17;\r\nvar i3 = 0;\r\nvar i4 = 0;\r\nvar i5 = 0;\r\ni3 = i1 + i2;\r\ni4 = i1 * i2;\r\ni5 = i1\/i2;\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Ich empfehle, eine html Datei zu verwenden, die auf eine Javascript Datei verweist:<br \/>\nHier ein Beispiel f\u00fcr eine html Datei, die auf eine Javascript Datei verweist:<br \/>\n<code><\/code><\/p>\n<pre>&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;JavaScript&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script src=\"Test_01.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><script src=\"Test_01.js\"><\/script><\/p>\n<p>Test_01.js steht hier im Beispiel im gleichen Verzeichnis wie die html Datei:<\/p>\n<pre>var i1 = 15;\r\nvar i2 = 17;\r\nvar i3 = 0;\r\nvar i4 = 0;\r\nvar i5 = 0;\r\ni3 = i1 + i2;\r\ni4 = i1 * i2;\r\ni5 = i1\/i2;\r\n<\/pre>\n<h4>2. Debugger in Chrome starten<\/h4>\n<ul>\n<li>html Datei in Chrome \u00f6ffnen<\/li>\n<li>Im Chrome Men\u00fc rechts oben &#8211;&gt; Weitere Tools &#8211;&gt; Enwicklertools (oder STRG + UMSCHALT + I)<\/li>\n<li>Tab Source, Test_01.js w\u00e4hlen<\/li>\n<li>Breakpoint setzen, indem man mit der linken Maustaste links auf die Zeilennummer klickt.<\/li>\n<li><strong>Wichtig!!!!: CTRL R dr\u00fccken, damit Debuggen gestartet wird.<\/strong><\/li>\n<\/ul>\n<h4>3. Arbeiten mit dem Debugger<\/h4>\n<p>Quelle:\u00a0<a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/javascript-debugging\" target=\"_blank\">https:\/\/developer.chrome.com\/devtools\/docs\/javascript-debugging<\/a><\/p>\n<p><a href=\"https:\/\/dieter-steffen.de\/wp-content\/uploads\/2015\/05\/javascript-debugging-overview.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-355\" src=\"https:\/\/dieter-steffen.de\/wp-content\/uploads\/2015\/05\/javascript-debugging-overview.jpg\" alt=\"javascript-debugging-overview\" width=\"1100\" height=\"994\" data-id=\"355\" srcset=\"https:\/\/dieter-steffen.de\/wp-content\/uploads\/2015\/05\/javascript-debugging-overview.jpg 1100w, https:\/\/dieter-steffen.de\/wp-content\/uploads\/2015\/05\/javascript-debugging-overview-300x271.jpg 300w, https:\/\/dieter-steffen.de\/wp-content\/uploads\/2015\/05\/javascript-debugging-overview-1024x925.jpg 1024w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/a><\/p>\n<h3 class=\"has-permalink\">\u00a0Execution control<\/h3>\n<p>The <strong>execution control<\/strong> buttons are located at the top of the side panels and allow you to step through code. The buttons available are:<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/developer.chrome.com\/devtools\/images\/continue.jpg\" alt=\"\" \/> Continue:<\/strong> continues code execution until we encounter another breakpoint.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/developer.chrome.com\/devtools\/images\/step_over.jpg\" alt=\"\" \/> Step over:<\/strong> step through code line-by-line to get insights into how each line affects the variables being updated. Should your code call another function, the debugger won&#8217;t jump into its code, instead stepping over so that the focus remains on the current function.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/developer.chrome.com\/devtools\/images\/step_into.jpg\" alt=\"\" \/> Step into:<\/strong> like Step over, however clicking Step into at the function call will cause the debugger to move its execution to the first line in the functions definition.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/developer.chrome.com\/devtools\/images\/step_out.jpg\" alt=\"\" \/>Step out:<\/strong> having stepped into a function, clicking this will cause the remainder of the function definition to be run and the debugger will move its execution to the parent function.<\/p>\n<p><strong><img decoding=\"async\" src=\"https:\/\/developer.chrome.com\/devtools\/images\/disable-breakpoints.png\" alt=\"\" \/>Toggle breakpoints:<\/strong> toggles breakpoints on\/off while leaving their enabled states intact.<\/p>\n<p>There are also several related keyboard shortcuts available in the <strong>Sources<\/strong> panel:<\/p>\n<ul>\n<li><strong>Continue<\/strong>: <kbd class=\"kbd\">F8<\/kbd> or <kbd><kbd class=\"kbd\">Command<\/kbd> + <kbd class=\"kbd\">\\<\/kbd><\/kbd> on Mac or <kbd><kbd class=\"kbd\">Ctrl<\/kbd> + <kbd class=\"kbd\">\\<\/kbd><\/kbd> on other platforms.<\/li>\n<li><strong>Step over<\/strong>: <kbd class=\"kbd\">F10<\/kbd> or <kbd><kbd class=\"kbd\">Command<\/kbd>+<kbd class=\"kbd\">'<\/kbd><\/kbd> on Mac or <kbd><kbd class=\"kbd\">Ctrl<\/kbd>+<kbd class=\"kbd\">'<\/kbd><\/kbd> on other platforms.<\/li>\n<li><strong>Step into<\/strong>: <kbd class=\"kbd\">F11<\/kbd> or <kbd><kbd class=\"kbd\">Command<\/kbd>+<kbd class=\"kbd\">;<\/kbd><\/kbd> on Mac or <kbd><kbd class=\"kbd\">Ctrl<\/kbd>+<kbd class=\"kbd\">;<\/kbd><\/kbd> on other platforms.<\/li>\n<li><strong>Step out<\/strong>: <kbd><kbd class=\"kbd\">Shift<\/kbd>+<kbd class=\"kbd\">F11<\/kbd><\/kbd> or <kbd><kbd class=\"kbd\">Shift<\/kbd>+<kbd class=\"kbd\">Command<\/kbd>+<kbd class=\"kbd\">;<\/kbd><\/kbd> on Mac or <kbd><kbd class=\"kbd\">Shift<\/kbd>+<kbd class=\"kbd\">Ctrl<\/kbd>+<kbd class=\"kbd\">;<\/kbd><\/kbd> on other platforms.<\/li>\n<li><strong>Next call frame<\/strong>: <kbd><kbd class=\"kbd\">Ctrl<\/kbd>+<kbd class=\"kbd\">.<\/kbd><\/kbd> on all platforms.<\/li>\n<li><strong>Previous call frame<\/strong>: <kbd><kbd class=\"kbd\">Ctrl<\/kbd>+<kbd class=\"kbd\">,<\/kbd><\/kbd> on all platforms.<\/li>\n<\/ul>\n<p><b><\/b><strong>Wichtige Tastaturbefehle<\/strong><\/p>\n<ul>\n<li><strong>Pause (F8)<\/strong>: Dies stoppt das Skript bei der n\u00e4chsten JavaScript-Funktion und erm\u00f6glicht das Debuggen an dieser Stelle.<\/li>\n<li><strong>Resume (F8)<\/strong>: L\u00e4sst das JavaScript weiterlaufen und stoppt am n\u00e4chstem Breakpoint. Nur verf\u00fcgbar wenn das JavaScript bereits angehalten ist.<\/li>\n<li><strong>Step over (F10)<\/strong>: \u00dcberspringt einen Funktionsaufruf und geht direkt in die n\u00e4chste Zeile.<\/li>\n<li><strong>Step into (F11)<\/strong>: Springt in einen Funktionsaufruf.<\/li>\n<li><strong>Step out (Shift + F11)<\/strong>: Springt aus einer Funktion heraus und geht wieder in die aufrufende Funktion.<\/li>\n<\/ul>\n<h4>4. Weitere Links<\/h4>\n<p><a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/javascript-debugging\" target=\"_blank\">https:\/\/developer.chrome.com\/devtools\/docs\/javascript-debugging<\/a><br \/>\n<a href=\"http:\/\/www.sgalinski.de\/news\/javascript-im-google-chrome-debuggen.html\" target=\"_blank\">http:\/\/www.sgalinski.de\/news\/javascript-im-google-chrome-debuggen.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Vorbedingungen Javascript muss &#8211; so weit ich das ausprobiert habe &#8211; in html eingebettet sein.\u00a0Eine reine Javascriptdatei xxx.js zu debuggen habe ich pers\u00f6nlich nicht hinbekommen. Die html Datei mit eingebetteten Javascript sieht zum Beispiel wie folgt aus: &lt;html&gt; &lt;head&gt;&#8230;<br \/><a class=\"read-more-button\" href=\"https:\/\/dieter-steffen.de\/?p=349\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-349","post","type-post","status-publish","format-standard","hentry","category-edv"],"_links":{"self":[{"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=349"}],"version-history":[{"count":12,"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=\/wp\/v2\/posts\/349\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dieter-steffen.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}