{"id":4057,"date":"2020-02-12T14:42:53","date_gmt":"2020-02-12T05:42:53","guid":{"rendered":"https:\/\/learningbox.co.jp\/?p=4057"},"modified":"2020-02-12T14:42:53","modified_gmt":"2020-02-12T05:42:53","slug":"blog_chrome-devtools-2","status":"publish","type":"post","link":"https:\/\/learningbox.co.jp\/en\/2020\/02\/12\/blog_chrome-devtools-2\/","title":{"rendered":"Conditional debugging with Chrome DevTools!"},"content":{"rendered":"<p>Hello, this is Yoshino from Development! Last time we talked about<a href=\"https:\/\/learningbox.co.jp\/en\/2019\/12\/16\/blog_chrome-devtools\/\" rel=\"noopener noreferrer\" target=\"_blank\"><strong>About debugging JavaScript in Google Chrome browser<\/strong><\/a>\"article and showed you how to do some basic debugging when you place a breakpoint.<br \/>\nIn this article.<strong>\"Conditional Code Line Breakpoints<\/strong>The following is an introduction to the settings about<\/p>\n<p class=\"mokujimidasi\">Click here for table of contents<\/p>\n<ul class=\"mokuji\">\n<li>1. what is a conditional code line?<\/li>\n<li>2. insert a conditional code line breakpoint<\/li>\n<li>3. summary<\/li>\n<\/ul>\n<h2><strong>What is a conditional code line?<\/strong><\/h2>\n<p>A conditional line of code is, as the word implies, a line of code with a condition added to it. A condition is set at a breakpoint, and if the condition is true, the process is paused.<\/p>\n<h2><strong>Insert a conditional code line breakpoint<\/strong><\/h2>\n<p>Rather than explaining it in words, let's actually insert a conditional code line breakpoint and run it.<\/p>\n<p class=\"well2\">\nClick here for the procedure.<br \/>\nSTEP1. Open Chrome DevTools<br \/>\nFor Windows, click here \u2192 F12 or Shift + Ctrl + I<br \/>\nFor Mac, click here \u2192 Cmd + Opt + I<br \/>\nSTEP2. Click the \"Sources\" tab when Chrome DevTools opens.<br \/>\nSTEP3. Left-click the row number column.<br \/>\nSTEP4.The blue icon is displayed in the row number column that you clicked, and right-click.<br \/>\nSTEP5. Left-click \"Edit breakpoint...\".<br \/>\nSTEP6.Set the condition when you want to pause the process (This time, set it to pause when x is 100 or more)\n<\/p>\n<h3><strong>Here is the operation screen<\/strong><\/h3>\n<p><a href=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/00.gif\" rel=\"noopener noreferrer\" target=\"_blank\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/00.gif\" alt=\"\" width=\"532\" height=\"212\" class=\"alignnone size-full wp-image-4141\" \/><\/a><\/p>\n<p><strong>\u25bc Let's debug the breakpoint we just inserted by executing resume.<\/strong><br \/>\n<a href=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/01.gif\" rel=\"noopener noreferrer\" target=\"_blank\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/01.gif\" alt=\"Tatsuno Information System\" width=\"532\" height=\"212\" class=\"alignnone size-full wp-image-4142\" \/><\/a><\/p>\n<p>The process proceeded without being paused by the orange icon. This is because I inserted a breakpoint to stop the process if the condition setting is \"x is 100 or more\".<\/p>\n<p><strong>Next, let's insert a breakpoint to stop the process \"if x is less than 100\".<\/strong><br \/>\n<a href=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/02.gif\" rel=\"noopener noreferrer\" target=\"_blank\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/02.gif\" alt=\"Tatsuno Information System\" width=\"532\" height=\"212\" class=\"alignnone size-full wp-image-4143\" \/><\/a><\/p>\n<p>Since x = 30, the condition \"if x is less than or equal to 100\" is met, so the process was paused this time.<\/p>\n<p>You can set various conditions to conditional code line breakpoints. They are very useful when you want to stop processing under specific conditions, so please try to use them!<\/p>\n<h2><strong>summary<\/strong><\/h2>\n<p>In this article, I explained how to insert a conditional code line breakpoint. The condition can be a string as well as a number, so try it out! Thank you for your patience with this article.<\/p>","protected":false},"excerpt":{"rendered":"\u3053\u3093\u306b\u3061\u306f\u3001\u958b\u767a\u306e\u5409\u91ce\u3067\u3059\uff01\u524d\u56de\u306f\u300cGoogle Chrome\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u306eJavaScript\u306e\u30c7\u30d0\u30c3\u30b0\u306b\u3064 [&hellip;]","protected":false},"author":22,"featured_media":4145,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":".p-entry__body h1  {\r\n  \/*\u7dda\u306e\u7a2e\u985e\uff08\u5b9f\u7dda\uff09 \u592a\u3055 \u8272*\/\r\n  border-bottom: solid 8px #3FA5F5;\r\n  display:inline-block;\r\n  font-size:36px;\r\n}\r\n\r\nh2 {\r\n  padding: 0.25em 0.5em;\/*\u4e0a\u4e0b \u5de6\u53f3\u306e\u4f59\u767d*\/\r\n  color: #494949;\/*\u6587\u5b57\u8272*\/\r\n  background: transparent;\/*\u80cc\u666f\u900f\u660e\u306b*\/\r\n  border-left: solid 5px #3FA5F5;\/*\u5de6\u7dda*\/\r\n  padding-left: 19px !important;\r\n  margin-bottom: 24px !important;\r\n}\r\n\r\n.yellowline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}\r\n\r\n\r\n.mokujimidasi{\r\n  position: relative;\r\n  padding: 0.6em 0.6em 0.6em 1.4em;\r\n  background: #e0edff;\r\n  font-weight:bold;\r\n}\r\n\r\n.mokujimidasi:after {\r\n  position: absolute;\r\n  content: '';\r\n  top: 100%;\r\n  left: 30px;\r\n  border: 15px solid transparent;\r\n  border-top: 15px solid #e0edff;\r\n  width: 0;\r\n  height: 0;\r\n}\r\n\r\n\r\nul.mokuji{\r\n    padding: 0.5em 1em;\r\n    font-weight: bold;\r\n    border: solid 3px #3b5998;\r\n}\r\n\r\nul.mokuji li{\r\n  line-height: 1.5;\r\n  padding: 0.5em 0;\r\n  list-style: none;\r\n}\r\n\r\n.p-entry__body ul.mokuji{\r\nmargin-left:0em;\r\n}\r\n\r\n.p-entry__body p{\r\nmargin-bottom:18px;\r\n}\r\n\r\n.box1 {\r\n    padding: 0.5em 1em;\r\n    margin: 2em 0;\r\n    font-weight: bold;\r\n    border: solid 3px #000000;\r\n}\r\n.box1 p {\r\n    margin: 0; \r\n    padding: 0;\r\n}\r\n\r\n.box28 {\r\n    position: relative;\r\n    margin: 2em 0;\r\n    padding: 25px 10px 7px;\r\n    border: solid 2px #FFC107;\r\n}\r\n.box28 .box-title {\r\n    position: absolute;\r\n    display: inline-block;\r\n    top: -2px;\r\n    left: -2px;\r\n    padding: 0 9px;\r\n    height: 25px;\r\n    line-height: 25px;\r\n    font-size: 17px;\r\n    background: #FFC107;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n}\r\n.box28 p {\r\n    margin: 0; \r\n    padding: 0;\r\n}\r\n\r\nh3 {\r\n  position: relative;\r\n  padding: 0.25em 0;\r\n}\r\nh3:after {\r\n  content: \"\";\r\n  display: block;\r\n  height: 4px;\r\n  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);\r\n  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);\r\n}","veu_display_promotion_alert":"","vkexunit_cta_each_option":"0","footnotes":"","jetpack_post_was_ever_published":false},"categories":[6,7,40],"tags":[],"class_list":["post-4057","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-7","category-40"],"acf":[],"jetpack_featured_media_url":"https:\/\/learningbox.co.jp\/wp-content\/uploads\/2020\/02\/chrome-DevTools.png","jetpack_shortlink":"https:\/\/wp.me\/pgMrZ4-13r","_links":{"self":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/4057","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/comments?post=4057"}],"version-history":[{"count":11,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/4057\/revisions"}],"predecessor-version":[{"id":4152,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/posts\/4057\/revisions\/4152"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/media\/4145"}],"wp:attachment":[{"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/media?parent=4057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/categories?post=4057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learningbox.co.jp\/en\/wp-json\/wp\/v2\/tags?post=4057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}