CINXE.COM

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" /><title>君はVS Codeのデバッグの知られざる機能について知っているか #初心者 - Qiita</title><meta content="はじめにこんにちは、kenです。GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれ…" name="description" /><meta content="width=device-width,initial-scale=1,shrink-to-fit=no,viewport-fit=cover" name="viewport" /><meta content="#ffffff" name="theme-color" /><meta content="XWpkTG32-_C4joZoJ_UsmDUi-zaH-hcrjF6ZC_FoFbk" name="google-site-verification" /><meta content="telephone=no" name="format-detection" /><link rel="canonical" href="https://qiita.com/_ken_/items/c5aa4841be74b06530b4" /><link href="/manifest.json" rel="manifest" /><link href="/opensearch.xml" rel="search" title="Qiita" type="application/opensearchdescription+xml" /><link as="script" href="https://www.googletagservices.com/tag/js/gpt.js" rel="preload" /><link href="https://securepubads.g.doubleclick.net" rel="preconnect" /><script async="" src="https://www.googletagservices.com/tag/js/gpt.js"></script><meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="lADoGdMn10URgLacI83kphhndC6z6lEVc7-4rexc8GQsfrLcLA9MjnfhfP6YvYC9-XaVzgxDPFSDjvH8ksS1nA" /><link rel="icon" type="image/x-icon" href="https://cdn.qiita.com/assets/favicons/public/production-c620d3e403342b1022967ba5e3db1aaa.ico" /><link rel="apple-touch-icon" type="image/png" href="https://cdn.qiita.com/assets/favicons/public/apple-touch-icon-ec5ba42a24ae923f16825592efdc356f.png" /><link rel="stylesheet" href="https://cdn.qiita.com/assets/public/article-3c146ab3ef20c04bf76d6709e24df1aa.min.css" media="all" /><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,500,0..1,-25..0" media="all" /><script src="https://cdn.qiita.com/assets/public/v3-article-bundle-3b4179b936e6aa62.min.js" defer="defer"></script><meta name="twitter:card" content="summary_large_image"><meta content="@Qiita" name="twitter:site" /><meta content="@ken_hassy" name="twitter:creator" /><meta property="og:type" content="article"><meta property="og:title" content="君はVS Codeのデバッグの知られざる機能について知っているか - Qiita"><meta property="og:image" content="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYxNjQ5MjE4JTJGYzQ3ZjY4MjkyNWQzNDE1NjEzMjBmNjFhMjgwOTBlNzUyZjk3ZDQ4ZSUyRmxhcmdlLnBuZyUzRjE2NTYzMTIxMzA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjVlNjcwYjllYTQ4OGZiOTMwNDlhOWVmZTliOWFkYzY%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkYzODI3OGJhN2ZjOTFkMWY4YjFjYmExY2ZjNjczMDVlZWE2N2ZiMTk4JTJGb3JpZ2luYWwuanBnJTNGMTczMjA5ODMzNj9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZib3JkZXI9MiUyQ0ZGRkZGRiZmbT1wbmczMiZzPWZjZDRlZDMyMmU2ZGRhN2Q4OTRlYmIzNTM5YTNlZDBh%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D85fa099d6bdeafa9f9942e8a53bac166?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU1JTkwJTlCJUUzJTgxJUFGVlMlMjBDb2RlJUUzJTgxJUFFJUUzJTgzJTg3JUUzJTgzJTkwJUUzJTgzJTgzJUUzJTgyJUIwJUUzJTgxJUFFJUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgyJThDJUUzJTgxJTk2JUUzJTgyJThCJUU2JUE5JTlGJUU4JTgzJUJEJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUU3JTlGJUE1JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgyJThCJUUzJTgxJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NmJkNTcwMmEzOTg5Y2I1M2ExZTdjNWQxYzNhYzViZTE&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBfa2VuXyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFlMzczNzNmNDQ1NmM2Yzg2MjQ4ZjI3OTJiYTE2NDhm&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=5qCq5byP5Lya56S-SFJCcmFpbg&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=4a2924835390df7ea91fc4492791980a"><meta property="og:description" content="はじめにこんにちは、kenです。GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれ…"><meta content="https://qiita.com/_ken_/items/c5aa4841be74b06530b4" property="og:url" /><meta content="Qiita" property="og:site_name" /><meta content="564524038" property="fb:admins" /><meta content="debug,初心者,VSCode" name="keywords" /><script>!function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '305156090176370'); fbq('trackSingle', '305156090176370', 'PageView');</script><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=305156090176370&ev=PageView&noscript=1"/></noscript><link href="http://www.hatena.ne.jp/ken_math/" rel="author" /><style data-emotion="style-global ffh7zq">.style-ffh7zq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:56px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:16px 24px 0;}@media (max-width: 1199px){.style-ffh7zq{gap:24px;}}@media (max-width: 769px){.style-ffh7zq{padding:16px 16px 0;}}@media (max-width: 479px){.style-ffh7zq{padding:16px 0 0;}}</style><style data-emotion="style-global 1hl01qi">.style-1hl01qi{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;position:-webkit-sticky;position:sticky;top:40px;z-index:5;}@media (max-width: 769px){.style-1hl01qi{display:none;}}</style><style data-emotion="style-global c1wjhj">.style-c1wjhj{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1duml6f">.style-1duml6f{height:40px;width:40px;position:relative;}.style-1duml6f svg{cursor:auto;pointer-events:none;}</style><style data-emotion="style-global ftns26">.style-ftns26{fill:none;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.style-ftns26 .circle,.style-ftns26 .heart-stroke,.style-ftns26 .heart-fill,.style-ftns26 .particle{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;transform-origin:center center;}.style-ftns26 .circle{fill:var(--color-surface);stroke:var(--color-divider);stroke-width:1;}.style-ftns26 .heart-stroke{fill:var(--color-mediumEmphasis);}.style-ftns26 .heart-fill{fill:var(--color-qiitaGreen);opacity:0;}.style-ftns26 .particles{rotate:var(--rotate);transform-origin:center center;}.style-ftns26 .particle{opacity:0;}.style-ftns26.liked .circle{-webkit-animation-delay:90ms;animation-delay:90ms;-webkit-animation-duration:60ms;animation-duration:60ms;-webkit-animation-name:animation-1n63bow;animation-name:animation-1n63bow;}.style-ftns26.liked .heart-stroke{-webkit-animation-duration:150ms;animation-duration:150ms;-webkit-animation-name:animation-d4tj02;animation-name:animation-d4tj02;}.style-ftns26.liked .heart-fill{-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-duration:100ms;animation-duration:100ms;-webkit-animation-name:animation-19addpb;animation-name:animation-19addpb;}.style-ftns26.liked .particle{-webkit-animation-delay:150ms;animation-delay:150ms;-webkit-animation-duration:var(--duration);animation-duration:var(--duration);-webkit-animation-name:animation-1spcwjj;animation-name:animation-1spcwjj;}</style><style data-emotion="style-global animation-1spcwjj">@-webkit-keyframes animation-1spcwjj{1%{opacity:1;}90%{opacity:1;}100%{cx:var(--x);cy:var(--y);opacity:0;}}@keyframes animation-1spcwjj{1%{opacity:1;}90%{opacity:1;}100%{cx:var(--x);cy:var(--y);opacity:0;}}</style><style data-emotion="style-global animation-19addpb">@-webkit-keyframes animation-19addpb{1%{scale:1.2;opacity:1;}100%{scale:1;opacity:1;}}@keyframes animation-19addpb{1%{scale:1.2;opacity:1;}100%{scale:1;opacity:1;}}</style><style data-emotion="style-global animation-d4tj02">@-webkit-keyframes animation-d4tj02{40%{fill:currentColor;scale:0.85;}100%{fill:var(--color-qiitaGreen);}}@keyframes animation-d4tj02{40%{fill:currentColor;scale:0.85;}100%{fill:var(--color-qiitaGreen);}}</style><style data-emotion="style-global animation-1n63bow">@-webkit-keyframes animation-1n63bow{100%{stroke:var(--color-qiitaGreen);}}@keyframes animation-1n63bow{100%{stroke:var(--color-qiitaGreen);}}</style><style data-emotion="style-global 10ttvi6">.style-10ttvi6{background-color:transparent;border:none;cursor:pointer;height:40px;padding:0;position:absolute;width:40px;}.style-10ttvi6:disabled{cursor:not-allowed;}</style><style data-emotion="style-global wknrvb">@media (max-width: 769px){.style-wknrvb{display:block;}}</style><style data-emotion="style-global 3fim88">.style-3fim88{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}</style><style data-emotion="style-global 1a6dkvp">.style-1a6dkvp{color:var(--color-mediumEmphasis);cursor:pointer;font-size:var(--font-size-body-2);font-weight:bold;}</style><style data-emotion="style-global 16g96ve">.style-16g96ve{background-color:var(--color-grayContainer);border-radius:4px;color:var(--color-onContainerText);font-size:var(--font-size-body-3);max-width:280px;overflow-wrap:break-word;padding:4px 8px;position:absolute;pointer-events:none;display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:calc(100% + 0px + 4px);}.style-16g96ve::after{background-color:var(--color-grayContainer);content:"";position:absolute;}.style-16g96ve::after{-webkit-clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);clip-path:polygon(0% 50%, 100% 0%, 100% 100%, 0% 50%);height:8px;right:100%;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4px;}</style><style data-emotion="style-global 1bc9a2c">.style-1bc9a2c{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 100tu0r">.style-100tu0r{display:inline-block;fill:var(--color-mediumEmphasis);height:24px;width:24px;}</style><style data-emotion="style-global 1vem4tk">.style-1vem4tk{color:var(--color-mediumEmphasis);font-size:14px;font-weight:bold;}@media (max-width: 769px){.style-1vem4tk{display:inline;}}</style><style data-emotion="style-global 1n9ulpr">.style-1n9ulpr{border:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-mediumEmphasis);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:20px;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}</style><style data-emotion="style-global 1b1cd5z">.style-1b1cd5z{height:20px;fill:var(--color-twitter);width:20px;}</style><style data-emotion="style-global 157xj1g">.style-157xj1g{height:20px;fill:#1877f2;width:20px;}</style><style data-emotion="style-global 1uu7u3w">.style-1uu7u3w{height:20px;width:20px;}</style><style data-emotion="style-global 79elbk">.style-79elbk{position:relative;}</style><style data-emotion="style-global v2p563">.style-v2p563{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;}</style><style data-emotion="style-global oi42s2">.style-oi42s2:modal{background-color:transparent;border:none;max-height:none;max-width:none;width:100%;height:100dvh;display:grid;place-items:center;padding:16px;}.style-oi42s2::backdrop{background-color:rgb(0 0 0 / .32);}</style><style data-emotion="style-global 2aaf4j">.style-2aaf4j{background-color:var(--color-surface);border-radius:8px;color:var(--color-highEmphasis);max-width:600px;max-height:calc(100vh - 160px);overflow-y:auto;padding:24px;width:100%;scrollbar-width:thin;scrollbar-color:var(--scrollbar-color-scrollbarThumb) transparent;}.style-2aaf4j::-webkit-scrollbar{width:8px;}.style-2aaf4j::-webkit-scrollbar-track{background:transparent;}.style-2aaf4j::-webkit-scrollbar-thumb{background:var(--scrollbar-color-scrollbarThumb);border-radius:4px;}</style><style data-emotion="style-global bxc62b">.style-bxc62b{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--color-divider);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:8px;}</style><style data-emotion="style-global 1snuvpu">.style-1snuvpu{font-size:var(--font-size-subhead-2);font-weight:600;line-height:1.4;}</style><style data-emotion="style-global o8tyjw">.style-o8tyjw{background-color:transparent;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px;}</style><style data-emotion="style-global 6vdptm">.style-6vdptm{font-size:var(--font-size-body-1);margin-top:16px;}</style><style data-emotion="style-global 111ab2g">.style-111ab2g{border-top:1px solid var(--color-divider);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-top:16px;padding-top:16px;}</style><style data-emotion="style-global hreeih">.style-hreeih{border-radius:8px;box-sizing:border-box;cursor:pointer;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;margin-bottom:0;min-height:34px;min-width:64px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-grayBorder);color:var(--color-grayText);padding:3px 15px;}.style-hreeih:disabled{box-shadow:none;cursor:not-allowed;opacity:0.32;}.style-hreeih:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-hreeih:hover{background-color:var(--color-background);}}</style><style data-emotion="style-global y54waz">.style-y54waz{border-radius:8px;box-sizing:border-box;cursor:pointer;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;margin-bottom:0;min-height:34px;min-width:64px;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-redContainer);color:var(--color-onContainerText);padding:4px 16px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;}.style-y54waz:disabled{box-shadow:none;cursor:not-allowed;opacity:0.32;}.style-y54waz:active{background-color:var(--color-redContainerDim);}@media (hover: hover) and (pointer: fine){.style-y54waz:hover{background-color:var(--color-redContainerDim);}}</style><style data-emotion="style-global 1jvcm2e">.style-1jvcm2e{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;}</style><style data-emotion="style-global 1hbd3g7">.style-1hbd3g7{height:250px;}</style><style data-emotion="style-global itrjxe">.style-itrjxe{background-color:var(--color-surface);border-radius:8px;padding:32px 56px;margin-bottom:24px;}@media (max-width: 769px){.style-itrjxe{padding:24px 32px;}}@media (max-width: 479px){.style-itrjxe{border-radius:0;margin:0 0 40px;padding:24px 16px;}}</style><style data-emotion="style-global 1cpeld6">.style-1cpeld6{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-yellowContainerVariant);border-radius:8px;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);font-weight:600;gap:8px;line-height:1.5;margin-bottom:16px;padding:16px;}</style><style data-emotion="style-global 1l7bzw8">.style-1l7bzw8{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;color:var(--color-yellowText);}</style><style data-emotion="style-global 8qb8m4">.style-8qb8m4{margin-bottom:48px;}</style><style data-emotion="style-global 1yndj8s">.style-1yndj8s{display:grid;gap:8px;margin-bottom:16px;}</style><style data-emotion="style-global i43zkt">.style-i43zkt{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);gap:0 8px;line-height:var(--line-height-body);width:100%;}</style><style data-emotion="style-global 17gh4w8">.style-17gh4w8{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0 8px;width:calc(100% - 40px);}</style><style data-emotion="style-global mavs84">.style-mavs84{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}</style><style data-emotion="style-global kcbbwa">.style-kcbbwa{border-radius:50%;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:hidden;position:relative;width:24px;height:24px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;}.style-kcbbwa::before{background-color:var(--color-gray0);border-radius:50%;content:"";height:23px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:23px;}</style><style data-emotion="style-global 1wqqt93">.style-1wqqt93{display:block;height:24px;object-fit:contain;position:relative;width:24px;}</style><style data-emotion="style-global 15fzge">.style-15fzge{margin-left:4px;}</style><style data-emotion="style-global 1e7czb6">.style-1e7czb6{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:0 4px;max-width:100%;}</style><style data-emotion="style-global 1o5v0u9">.style-1o5v0u9{color:var(--color-highEmphasis);font-weight:600;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0 4px;max-width:calc(100% - 12px);}</style><style data-emotion="style-global rdqgjc">.style-rdqgjc{background-color:var(--color-gray0);border-radius:4px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;height:20px;object-fit:contain;width:20px;}</style><style data-emotion="style-global 8uhtka">.style-8uhtka{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}</style><style data-emotion="style-global wo2a1i">.style-wo2a1i{font-size:28px;font-weight:600;line-height:var(--line-height-headline);margin-top:8px;word-break:break-all;}</style><style data-emotion="style-global 28f073">.style-28f073{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;margin-top:16px;}</style><style data-emotion="style-global mp1hhj">.style-mp1hhj{background-color:var(--color-surfaceVariant);border-radius:4px;color:var(--color-mediumEmphasis);display:block;font-size:var(--font-size-body-2);line-height:var(--line-height-body-dense);padding:0 6px;position:relative;z-index:1;}.style-mp1hhj:active{-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-surfaceVariantDim);}@media (hover: hover) and (pointer: fine){.style-mp1hhj:hover{-webkit-text-decoration:none;text-decoration:none;background-color:var(--color-surfaceVariantDim);}}</style><style data-emotion="style-global 1npej5s">.style-1npej5s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:var(--font-size-body-2);gap:0 8px;margin-top:8px;}</style><style data-emotion="style-global 1r3vbu3">.style-1r3vbu3{display:grid;gap:24px;margin-top:32px;}</style><style data-emotion="style-global gg4vpm">.style-gg4vpm{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><style data-emotion="style-global 1f18zs1">.style-1f18zs1{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;}</style><style data-emotion="style-global aaiy04">.style-aaiy04{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global buogjo">@media (max-width: 769px){.style-buogjo{display:none;}}</style><style data-emotion="style-global uw35c3">.style-uw35c3{background-color:var(--color-grayContainer);border-radius:4px;color:var(--color-onContainerText);font-size:var(--font-size-body-3);max-width:280px;overflow-wrap:break-word;padding:4px 8px;position:absolute;pointer-events:none;display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;bottom:calc(100% + 0px + 4px);left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}.style-uw35c3::after{background-color:var(--color-grayContainer);content:"";position:absolute;}.style-uw35c3::after{-webkit-clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);clip-path:polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);height:4px;left:50%;top:100%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:8px;}</style><style data-emotion="style-global izmm4j">.style-izmm4j{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:4px;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1129w32">.style-1129w32{color:var(--color-mediumEmphasis);font-size:14px;font-weight:bold;}@media (max-width: 769px){.style-1129w32{display:none;}}</style><style data-emotion="style-global tzv11m">.style-tzv11m{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;color:var(--color-highEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);gap:4px;padding:0 4px;}.style-tzv11m:active{background-color:var(--color-surfaceVariant);-webkit-text-decoration:none;text-decoration:none;}@media (hover: hover) and (pointer: fine){.style-tzv11m:hover{background-color:var(--color-surfaceVariant);-webkit-text-decoration:none;text-decoration:none;}}</style><style data-emotion="style-global n5k90r">.style-n5k90r{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;color:var(--color-mediumEmphasis);}</style><style data-emotion="style-global rwy56f">.style-rwy56f{background-image:url(//cdn.qiita.com/assets/public/image-qiitan_for_login_modal-014e085d3e40a240e3fe8d61b70b29a9.png);-webkit-background-position:bottom 24px right 24px;background-position:bottom 24px right 24px;background-repeat:no-repeat;-webkit-background-size:140px;background-size:140px;border:1px solid var(--color-greenBorder);border-radius:8px;margin:40px auto 0;max-width:572px;padding:24px;}@media (max-width: 769px){.style-rwy56f{width:100%;background-image:none;}}</style><style data-emotion="style-global 1nyasl8">.style-1nyasl8{font-size:var(--font-size-subhead-1);font-weight:600;line-height:1.4;}@media (max-width: 769px){.style-1nyasl8{font-size:var(--font-size-subhead-2);}}</style><style data-emotion="style-global 1i89dtz">.style-1i89dtz{font-size:var(--font-size-body-1);font-weight:600;list-style-position:inside;margin-top:16px;}@media (max-width: 769px){.style-1i89dtz{font-size:var(--font-size-body-2);}}</style><style data-emotion="style-global dzaums">.style-dzaums{display:inline-block;font-size:var(--font-size-body-2);margin-top:16px;-webkit-text-decoration:underline;text-decoration:underline;}</style><style data-emotion="style-global geahq7">.style-geahq7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;margin-top:16px;}@media (max-width: 769px){.style-geahq7{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><style data-emotion="style-global 1dq3d3h">.style-1dq3d3h{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-greenContainer);color:var(--color-onContainerText);padding:4px 16px;gap:16px;}.style-1dq3d3h:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1dq3d3h:active{background-color:var(--color-greenContainerDim);}@media (hover: hover) and (pointer: fine){.style-1dq3d3h:hover{background-color:var(--color-greenContainerDim);}}@media (max-width: 769px){.style-1dq3d3h{width:100%;}}</style><style data-emotion="style-global tfrxbl">.style-tfrxbl{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-grayBorder);color:var(--color-grayText);padding:3px 15px;gap:16px;}.style-tfrxbl:hover{-webkit-text-decoration:none;text-decoration:none;}.style-tfrxbl:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-tfrxbl:hover{background-color:var(--color-background);}}@media (max-width: 769px){.style-tfrxbl{width:100%;}}</style><style data-emotion="style-global 1395ble">.style-1395ble{background-color:var(--color-background);bottom:0;box-shadow:0px 1px 1px 0px rgba(30, 33, 33, 0.25),0px 0px 0px 1px var(--elevation-color-elevationDivider);display:none;height:calc(env(safe-area-inset-bottom, 0px) + 56px);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-bottom:env(safe-area-inset-bottom, 0px);position:fixed;width:100%;z-index:1000;}@media (max-width: 769px){.style-1395ble{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><style data-emotion="style-global 5jpx49">.style-5jpx49{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;-webkit-justify-content:space-evenly;justify-content:space-evenly;width:100%;}</style><style data-emotion="style 1xwfn2v 1o9h1hg 1vr7y3r 3k9iaf">.style-1xwfn2v{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:var(--color-surface);border:1px solid var(--color-divider);border-radius:50%;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:40px;}.style-1o9h1hg{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-mediumEmphasis);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:20px;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}.style-1vr7y3r{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:50%;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-subhead-1);height:32px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:0;width:32px;}.style-3k9iaf{color:var(--color-mediumEmphasis);}</style><style data-emotion="style-global 1736035">.style-1736035{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);font-weight:600;list-style:none;max-width:1656px;overflow-x:auto;padding:0 32px;width:100%;scrollbar-width:thin;scrollbar-color:var(--scrollbar-color-scrollbarThumb) transparent;}.style-1736035::-webkit-scrollbar{height:8px;}.style-1736035::-webkit-scrollbar-track{background:transparent;}.style-1736035::-webkit-scrollbar-thumb{background:var(--scrollbar-color-scrollbarThumb);border-radius:4px;}@media (max-width: 769px){.style-1736035{padding:0 16px;}}</style><style data-emotion="style-global 1cnt4b8">.style-1cnt4b8{background-color:var(--color-surface);}</style><style data-emotion="style-global ymuwam">.style-ymuwam{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin:auto;max-width:1656px;padding:8px 32px 0;width:100%;}@media (max-width: 769px){.style-ymuwam{padding:8px 16px 0;}}</style><style data-emotion="style-global fv3lde">.style-fv3lde{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion="style-global 1etvg7j">.style-1etvg7j{background-color:var(--color-qiitaGreen);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:6px 10px;border-radius:4px;}.style-1etvg7j >svg{fill:var(--color-gray0);height:18px;}</style><style data-emotion="style-global 68a7fl">.style-68a7fl{margin-right:12px;position:relative;width:320px;}@media (max-width: 991px){.style-68a7fl{display:none;}}</style><style data-emotion="style-global 18lpml7">.style-18lpml7{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;color:var(--color-mediumEmphasis);left:8px;position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}</style><style data-emotion="style-global 1gmi769">.style-1gmi769{background-color:var(--color-surfaceVariant);border:none;border-radius:8px;color:var(--color-highEmphasis);font-size:var(--font-size-body-1);line-height:var(--line-height-body);padding:4px 8px 4px 32px;width:100%;}.style-1gmi769::-webkit-input-placeholder{color:var(--color-disabled);}.style-1gmi769::-moz-placeholder{color:var(--color-disabled);}.style-1gmi769:-ms-input-placeholder{color:var(--color-disabled);}.style-1gmi769::placeholder{color:var(--color-disabled);}.style-1gmi769::-webkit-search-cancel-button{-webkit-appearance:none;}</style><style data-emotion="style-global 17ja8a3">.style-17ja8a3{display:none;}@media (max-width: 991px){.style-17ja8a3{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:inherit;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-1);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:10px;}}.style-17ja8a3:active{color:var(--color-highEmphasis);}@media (hover: hover) and (pointer: fine){.style-17ja8a3:hover{color:var(--color-highEmphasis);}}</style><style data-emotion="style-global v2p563">.style-v2p563{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:24px;height:24px;overflow:hidden;width:24px;}</style><style data-emotion="style-global 1afofdy">.style-1afofdy{-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);position:absolute;}</style><style data-emotion="style-global 1sn73cs">.style-1sn73cs{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-surface);border:1px solid var(--color-greenBorder);color:var(--color-greenText);padding:3px 15px;margin-left:4px;}.style-1sn73cs:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1sn73cs:active{background-color:var(--color-background);}@media (hover: hover) and (pointer: fine){.style-1sn73cs:hover{background-color:var(--color-background);}}</style><style data-emotion="style-global 1r635es">.style-1r635es{border-radius:8px;box-sizing:border-box;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.8;min-height:34px;min-width:64px;opacity:1;pointer-events:auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;-webkit-transition:.1s ease-out;transition:.1s ease-out;transition-property:background-color,border-color;background-color:var(--color-greenContainer);color:var(--color-onContainerText);padding:4px 16px;margin-left:8px;}.style-1r635es:hover{-webkit-text-decoration:none;text-decoration:none;}.style-1r635es:active{background-color:var(--color-greenContainerDim);}@media (hover: hover) and (pointer: fine){.style-1r635es:hover{background-color:var(--color-greenContainerDim);}}</style><style data-emotion="style-global o5vjsc">.style-o5vjsc{display:none;margin:8px auto 0;width:calc(100vw - 32px);position:relative;}</style><style data-emotion="style-global 1l4w6pd">.style-1l4w6pd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><style data-emotion="style-global 1ygoan4">.style-1ygoan4{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-mediumEmphasis);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;white-space:nowrap;padding:4px 12px;margin:4px 0;}.style-1ygoan4:hover{background-color:var(--color-surfaceVariant);border-radius:4px;color:var(--color-highEmphasis);-webkit-text-decoration:none;text-decoration:none;}</style><style data-emotion="style-global 1o3zxqp">.style-1o3zxqp{display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;font-size:16px;height:16px;overflow:hidden;width:16px;margin-left:4px;}</style><style data-emotion="style "></style><style data-emotion="style "></style><style data-emotion="style-global 1geho0x">.style-1geho0x{color:var(--color-gray0);background-color:var(--color-gray90);display:grid;grid-template-columns:minmax(0, 1592px);-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:64px;padding:48px 32px;width:100%;}@media (max-width: 991px){.style-1geho0x{padding-inline:16px;}}</style><style data-emotion="style-global 1vesoht">.style-1vesoht{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}@media (max-width: 1199px){.style-1vesoht{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}</style><style data-emotion="style-global 1xygyrj">.style-1xygyrj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;margin-right:48px;}</style><style data-emotion="style-global j7qwjs">.style-j7qwjs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><style data-emotion="style-global 1g0k1wk">.style-1g0k1wk{fill:var(--color-gray0);}</style><style data-emotion="style-global 754ift">.style-754ift{font-size:var(--font-size-body-2);margin-top:16px;}</style><style data-emotion="style-global 120vwzo">.style-120vwzo{font-size:var(--font-size-body-3);}@media (max-width: 1199px){.style-120vwzo{margin-top:24px;}}</style><style data-emotion="style-global 15fzge">.style-15fzge{margin-left:4px;}</style><style data-emotion="style-global 16bbk6m">.style-16bbk6m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:48px;}@media (max-width: 1199px){.style-16bbk6m{gap:32px;margin-top:48px;}}@media (max-width: 769px){.style-16bbk6m{gap:24px;}}@media (max-width: 479px){.style-16bbk6m{-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}}</style><style data-emotion="style-global u4ybgy">.style-u4ybgy{width:160px;}</style><style data-emotion="style-global 35ezg3">.style-35ezg3{font-weight:600;}</style><style data-emotion="style-global 1fhgjcy">.style-1fhgjcy{margin-top:4px;}</style><style data-emotion="style-global ah54os">.style-ah54os{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-gray0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--font-size-body-2);padding-top:4px;padding-bottom:4px;}</style><style data-emotion="style-global ox3ag9">.style-ox3ag9{height:14px;fill:currentColor;width:14px;}</style><style data-emotion="style "></style><link as="style" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" onload="this.onload=null;this.rel='stylesheet'" referrerpolicy="no-referrer" rel="preload" /><noscript><link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" referrerpolicy="no-referrer" rel="stylesheet" /></noscript></head><body><div class="allWrapper"><div id="GlobalHeader-react-component-c02f8ac0-e46f-419e-b8c1-3af225f7960c"><div class="style-1cnt4b8"><header><div class="style-ymuwam"><div class="style-fv3lde"><a href="/" aria-label="Qiita" class="style-1etvg7j"><svg viewBox="0 0 426.57 130" aria-hidden="true"><circle cx="167.08" cy="21.4" r="12.28"></circle><path d="M250.81 29.66h23.48v18.9h-23.48z"></path><path d="M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z"></path><circle cx="216.33" cy="21.4" r="12.28"></circle></svg></a></div><div class="style-fv3lde"><form action="/search" method="get" role="search" aria-label="Search" class="style-68a7fl"><span class="material-symbols-outlined style-18lpml7" aria-hidden="true">search</span><input type="search" autoComplete="off" placeholder="Search" name="q" required="" class="style-1gmi769" value=""/></form><button class="style-17ja8a3"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">search</span><span class="style-1afofdy">Search</span></button><a href="/login?callback_action=login_or_signup&redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4&realm=qiita" rel="nofollow" class="style-1sn73cs">Login</a><a href="/signup?callback_action=login_or_signup&redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4&realm=qiita" rel="nofollow" class="style-1r635es">Signup</a></div></div><form action="/search" method="get" role="search" aria-label="Search" class="style-o5vjsc"><span class="material-symbols-outlined style-18lpml7" aria-hidden="true">search</span><input type="text" autoComplete="off" placeholder="Search" name="q" required="" class="style-1gmi769" value=""/></form></header><nav aria-label="Global" class="style-1l4w6pd"><ol class="style-1736035"><li><a href="/" class="style-1ygoan4">Trend</a></li><li><a href="/question-feed" class="style-1ygoan4">Question</a></li><li><a href="/official-events" class="style-1ygoan4">Official Event</a></li><li><a href="/official-columns" target="_blank" class="style-1ygoan4">Official Column<span class="material-symbols-outlined style-1o3zxqp" aria-hidden="true">open_in_new</span></a></li><li><a href="/organizations" class="style-1ygoan4">Organization</a></li></ol></nav></div></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="GlobalHeader" data-dom-id="GlobalHeader-react-component-c02f8ac0-e46f-419e-b8c1-3af225f7960c">{"isHideGlobalNavigation":false}</script> <div id="AlertMessage-react-component-d4d144d3-d632-4279-858f-1fcecbd4c5a0"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="AlertMessage" data-dom-id="AlertMessage-react-component-d4d144d3-d632-4279-858f-1fcecbd4c5a0">{"isShowTfaDownloadAlert":null}</script> <div class="mainWrapper"><script type="application/ld+json">{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/","name":"Qiita"}},{"@type":"ListItem","position":2,"item":{"@id":"/tags/%25e5%2588%259d%25e5%25bf%2583%25e8%2580%2585","name":"初心者"}}]}</script><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","datePublished":"2023-05-08T09:57:44.000+09:00","dateModified":"2023-05-09T21:33:31.000+09:00","headline":"君はVS Codeのデバッグの知られざる機能について知っているか","image":"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYxNjQ5MjE4JTJGYzQ3ZjY4MjkyNWQzNDE1NjEzMjBmNjFhMjgwOTBlNzUyZjk3ZDQ4ZSUyRmxhcmdlLnBuZyUzRjE2NTYzMTIxMzA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjVlNjcwYjllYTQ4OGZiOTMwNDlhOWVmZTliOWFkYzY%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkYzODI3OGJhN2ZjOTFkMWY4YjFjYmExY2ZjNjczMDVlZWE2N2ZiMTk4JTJGb3JpZ2luYWwuanBnJTNGMTczMjA5ODMzNj9peGxpYj1yYi00LjAuMCZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZib3JkZXI9MiUyQ0ZGRkZGRiZmbT1wbmczMiZzPWZjZDRlZDMyMmU2ZGRhN2Q4OTRlYmIzNTM5YTNlZDBh%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3D85fa099d6bdeafa9f9942e8a53bac166?ixlib=rb-4.0.0\u0026w=1200\u0026fm=jpg\u0026mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUU1JTkwJTlCJUUzJTgxJUFGVlMlMjBDb2RlJUUzJTgxJUFFJUUzJTgzJTg3JUUzJTgzJTkwJUUzJTgzJTgzJUUzJTgyJUIwJUUzJTgxJUFFJUU3JTlGJUE1JUUzJTgyJTg5JUUzJTgyJThDJUUzJTgxJTk2JUUzJTgyJThCJUU2JUE5JTlGJUU4JTgzJUJEJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUU3JTlGJUE1JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJTg0JUUzJTgyJThCJUUzJTgxJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NmJkNTcwMmEzOTg5Y2I1M2ExZTdjNWQxYzNhYzViZTE\u0026mark-x=120\u0026mark-y=112\u0026blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBfa2VuXyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFlMzczNzNmNDQ1NmM2Yzg2MjQ4ZjI3OTJiYTE2NDhm\u0026blend-x=242\u0026blend-y=454\u0026blend-w=838\u0026blend-h=46\u0026blend-fit=crop\u0026blend-crop=left%2Cbottom\u0026blend-mode=normal\u0026txt64=5qCq5byP5Lya56S-SFJCcmFpbg\u0026txt-x=242\u0026txt-y=539\u0026txt-width=838\u0026txt-clip=end%2Cellipsis\u0026txt-color=%231E2121\u0026txt-font=Hiragino%20Sans%20W6\u0026txt-size=28\u0026s=4a2924835390df7ea91fc4492791980a","mainEntityOfPage":"https://qiita.com/_ken_/items/c5aa4841be74b06530b4","author":{"@type":"Person","address":"","email":null,"identifier":"_ken_","name":"_ken_","image":"https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fqiita-image-store%2F0%2F1649218%2Fc47f682925d341561320f61a28090e752f97d48e%2Flarge.png%3F1656312130?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026lossless=0\u0026w=75\u0026s=a726ef29888d140dcbdedd80b2dea1ee","url":"https://qiita.com/_ken_","description":"GoとPythonをよく書きます。アウトプットを頑張ります！","memberOf":[{"@type":"Organization","address":"東京都品川区上大崎2-25-2 新目黒東急ビル 5F","legalName":"株式会社HRBrain","image":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/053f0ab1d958be95bb1c2de0de0019678878bcc7/original.jpg?1688828175","logo":"https://qiita-organization-images.imgix.net/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fqiita-organization-image%2F38278ba7fc91d1f8b1cba1cfc67305eea67fb198%2Foriginal.jpg%3F1732098336?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026s=665427981863eb89e2972209469fbb2a","identifier":"hrbrain","description":"HRBrainは、タレントマネジメント、組織診断サーベイ、パルスサーベイ、人事評価、360度評価、ストレスチェック、労務管理、社内向けAIチャットボットの8つのクラウドサービスと組織人事コンサルティングサービスを展開しています。"}]},"publisher":{"@type":"Organization","name":"Qiita","logo":{"@type":"ImageObject","url":"https://cdn.qiita.com/assets/public/qiita-logo-c39ded593afa388e2e1ba435b110554e.png"}}}</script><style type="text/css">html { scroll-behavior: smooth; }</style><script type="application/json" id="js-react-on-rails-context">{"railsEnv":"production","inMailer":false,"i18nLocale":"en","i18nDefaultLocale":"en","rorVersion":"13.4.0","rorPro":false,"href":"https://qiita.com/_ken_/items/c5aa4841be74b06530b4","location":"/_ken_/items/c5aa4841be74b06530b4","scheme":"https","host":"qiita.com","port":null,"pathname":"/_ken_/items/c5aa4841be74b06530b4","search":null,"httpAcceptLanguage":null,"actionPath":"public/items#show","settings":{"analyticsTrackingId":"G-KEVS5DBRVN","tagManagerId":"GTM-W9W5TX4","assetsMap":{},"csrfToken":"WiyusBXJZfFoBjdPmSnP_cPgZ7jurpy2a65fkYBzqjfiUvR16uH-Og5n_S0iWavmIvGGWFEH8febnxbA_uvvzw","locale":"en","pushOne":{"accessToken":"4bc4bb057a0601d388a7b9e499ca2307e9eb4fc172804e310c59e511d7cac356","dialogImageUrl":"//cdn.qiita.com/assets/public/push_notification/image-qiitan-572179a3bbde375850422ea48b2b6272.png"},"textlint":{"workerUrl":"//cdn.qiita.com/assets/public/textlint-worker-43e261f6b1d6a0cfbf45d36ef7f16297.min.js"}},"currentUser":null,"isLoggedIn":false,"isQiitaConference2025BeingHeld":false,"isQiitaConference2025Closed":false,"isQiitaConference2025Registration":false,"isQiitaConference2025Published":false,"recaptchaSiteKey":"6LdDE6gpAAAAANCGOJu9_xiI5Z-txJxHCz8uBP8Y","errorIconPath":"//cdn.qiita.com/assets/icons/large/missing-profile-image-828ed5829a93fbb35746a6c0f7c8107e.png","additionalParams":{"query_parameters":{},"path_parameters":{"controller":"public/items","action":"show","user_id":"_ken_","type":"items","id":"c5aa4841be74b06530b4"},"request_id":"66617118-e203-406e-8675-136a71bbb7fc","user_id":null},"realms":[{"humanName":"Qiita","isCurrentRealm":true,"isQiita":true,"isQiitaTeam":false,"loggedInUser":null,"teamId":null,"url":"https://qiita.com/"}],"serverSide":false}</script> <div id="PersonalArticlePage-react-component-042dbb1c-314c-40c1-9f31-4df32b0e8c4a"><main class=" style-ffh7zq"><section class="style-1hl01qi"><div class="style-c1wjhj"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-wknrvb"><div class="style-3fim88"><a href="/_ken_/items/c5aa4841be74b06530b4/likers" aria-label="1644Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">1644</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-16g96ve">Go to list of users who liked</p></div></div></div><div class="style-1bc9a2c"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhRBcnRpY2xlLTE3MTQ1NTQGOgZFRg==--65692eb69581dbef6ab2d00eb94653bd880dc885f834d7c96c89525d9fdd6cf2" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1vem4tk">1610</span></div><button aria-label="Share on X(Twitter)" title="Post" class="style-1n9ulpr" type="button"><svg class="style-1b1cd5z" viewBox="0 0 20 20"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg></button><button aria-label="Share on facebook" title="Share on Facebook" class="style-1n9ulpr" type="button"><svg class="style-157xj1g" height="20" viewBox="0 0 20 20" width="20"><path d="m20 10c0-5.52-4.48-10-10-10s-10 4.48-10 10c0 4.99 3.66 9.13 8.44 9.88v-6.99h-2.54v-2.89h2.54v-2.2c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.77l-.44 2.89h-2.33v6.99c4.78-.75 8.44-4.89 8.44-9.88z"></path><path d="m13.89 12.89.44-2.89h-2.77v-1.88c0-.79.39-1.56 1.63-1.56h1.26v-2.46s-1.14-.2-2.24-.2c-2.28 0-3.78 1.38-3.78 3.89v2.2h-2.54v2.89h2.54v6.99c.51.08 1.03.12 1.56.12s1.05-.04 1.56-.12v-6.99h2.33z" fill="#ffffff"></path></svg></button><a class="style-1o9h1hg" href="https://b.hatena.ne.jp/entry/s/qiita.com/_ken_/items/c5aa4841be74b06530b4" rel="noopener noreferrer" target="_blank" title="Hatena Bookmark"><svg class="style-1uu7u3w" viewBox="0 0 20 20"><rect height="18" rx="3.67" width="18" x="1" y="1" fill="#1d9bf0"></rect><g fill="#ffffff"><path d="m11.01 10.29c-.33-.36-.78-.57-1.36-.61.52-.14.89-.35 1.13-.62s.35-.64.35-1.11c0-.37-.08-.69-.24-.97s-.39-.5-.69-.67c-.26-.15-.58-.25-.94-.31-.37-.06-1.01-.09-1.93-.09h-2.24v8.18h2.31c.93 0 1.6-.03 2.01-.09s.75-.17 1.03-.32c.34-.18.61-.44.79-.77s.28-.72.28-1.15c0-.61-.16-1.09-.49-1.46zm-3.85-2.57h.48c.55 0 .93.06 1.12.19s.29.34.29.65-.1.5-.31.63c-.21.12-.58.18-1.13.18h-.45v-1.64zm1.9 4.69c-.22.13-.59.2-1.12.2h-.78v-1.79h.81c.54 0 .91.07 1.11.2.2.14.3.38.3.72 0 .31-.11.53-.33.66z"></path><path d="m13.87 12.02c-.57 0-1.04.46-1.04 1.04s.46 1.04 1.04 1.04 1.04-.46 1.04-1.04-.46-1.04-1.04-1.04z"></path><path d="m12.97 5.91h1.8v5.45h-1.8z"></path></g></svg></a><div class="style-79elbk"><button aria-haspopup="menu" aria-expanded="false" aria-controls="ArticleStickyMenuDropdown" class="style-1vr7y3r" aria-label="Open options" type="button"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">more_horiz</span></button><dialog aria-modal="true" aria-labelledby="ArticleDeleteConfirmationModal-label" class="style-oi42s2"><div class="style-2aaf4j"><div class="style-bxc62b"><p id="ArticleDeleteConfirmationModal-label" class="style-1snuvpu">Delete article</p><button type="button" aria-label="" class="style-o8tyjw"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">close</span></button></div><div class="style-6vdptm"><p>Deleted articles cannot be recovered.</p><p>Draft of this article would be also deleted.</p><p>Are you sure you want to delete this article?</p></div><div class="style-111ab2g"><button font-size="16" type="button" class="style-hreeih">Cancel</button><button font-size="16" type="button" class="style-y54waz">Delete<span class="material-symbols-outlined is-fill style-1jvcm2e" aria-hidden="true">delete</span></button></div></div></dialog></div></section><div class="p-items_options"><aside><div class="style-1hbd3g7"></div></aside><div class="p-items_toc"><aside><div class="style-1hbd3g7"></div></aside></div></div><div class="p-items_main"><article class="style-itrjxe"><div class="style-1cpeld6"><span class="material-symbols-outlined is-fill style-1l7bzw8" aria-hidden="true">info</span><p>More than 1 year has passed since last update.</p></div><div class="style-8qb8m4"><div class="style-1yndj8s"></div><div data-logly-image="true" class="style-i43zkt"><div class="style-17gh4w8"><a href="/_ken_" class="style-mavs84"><div class="style-kcbbwa"><img height="24" loading="lazy" src="https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fqiita-image-store%2F0%2F1649218%2Fc47f682925d341561320f61a28090e752f97d48e%2Flarge.png%3F1656312130?ixlib=rb-4.0.0&auto=compress%2Cformat&lossless=0&w=48&s=6a69cb32c450488e467fb024b8667a8b" width="24" class="style-1wqqt93"/></div>@_ken_<span class="style-15fzge">(ken)</span></a><span class="style-1e7czb6"><span>in</span><a href="/organizations/hrbrain" class="style-1o5v0u9"><img src="https://qiita-organization-images.imgix.net/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fqiita-organization-image%2F38278ba7fc91d1f8b1cba1cfc67305eea67fb198%2Foriginal.jpg%3F1732098336?ixlib=rb-4.0.0&auto=compress%2Cformat&s=665427981863eb89e2972209469fbb2a" alt="" height="20" width="20" class="style-rdqgjc"/><span class="style-8uhtka">株式会社HRBrain</span></a></span></div></div><h1 data-logly-title="true" class="style-wo2a1i">君はVS Codeのデバッグの知られざる機能について知っているか</h1><ul class="style-28f073"><li><a href="/tags/debug" class="style-mp1hhj">debug</a></li><li><a href="/tags/%e5%88%9d%e5%bf%83%e8%80%85" class="style-mp1hhj">初心者</a></li><li><a href="/tags/vscode" class="style-mp1hhj">VSCode</a></li></ul><div class="style-1npej5s"><span class="style-3k9iaf">Last updated at <time dateTime="2023-05-09T12:33:31Z">2023-05-09</time></span><span class="style-3k9iaf">Posted at 2023-05-09</span></div></div><section class="it-MdContent"><div id="personal-public-article-body"><div class="mdContent-inner"><h1 data-sourcepos="1:1-1:14"> <span id="はじめに" class="fragment"></span><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB"><i class="fa fa-link"></i></a>はじめに</h1> <p data-sourcepos="2:1-4:181">こんにちは、kenです。<br> GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたら<a href="https://code.visualstudio.com/docs/editor/debugging" rel="nofollow noopener" target="_blank">デバッグ</a>に関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。<br> おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？）</p> <p data-sourcepos="6:1-6:118">以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。</p> <p data-sourcepos="8:1-8:51"><iframe id="qiita-embed-content__8c6978756ca41b92985b05630ef438f6" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__8c6978756ca41b92985b05630ef438f6" data-content="https%3A%2F%2Fcode.visualstudio.com%2Fdocs%2Feditor%2Fdebugging" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29"> </iframe> </p> <h2 data-sourcepos="10:1-10:9"> <span id="注意" class="fragment"></span><a href="#%E6%B3%A8%E6%84%8F"><i class="fa fa-link"></i></a>注意</h2> <div data-sourcepos="11:1-14:3" class="note warn"> <span class="fa fa-fw fa-exclamation-circle"></span><div> <ul data-sourcepos="12:1-13:222"> <li data-sourcepos="12:1-12:101">これから紹介する機能は言語によって使えたり、使えなかったりします。</li> <li data-sourcepos="13:1-13:222">今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。</li> </ul> </div> </div> <h1 data-sourcepos="17:1-17:41"> <span id="デバッグで使える便利な機能" class="fragment"></span><a href="#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E4%BE%BF%E5%88%A9%E3%81%AA%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>デバッグで使える便利な機能</h1> <h2 data-sourcepos="19:1-19:27"> <span id="ログポイント機能" class="fragment"></span><a href="#%E3%83%AD%E3%82%B0%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>ログポイント機能</h2> <p data-sourcepos="20:1-23:151">行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。<br> もちろんログ内には<code>{式}</code>という書式を使えば式も含めることもできます。<br> <strong>既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！</strong><br> これで <strong>「プリントデバッグしたprint行を消し忘れてPRあげちゃった……」</strong> みたいなことがなくなりそうです。</p> <p data-sourcepos="25:1-28:192">ログポイントを設定する方法は、ログポイントを出したい行の行番号の左側で右クリックし「ログポイントを追加」を選択。その後出したいログの内容を入力するだけです。<br> 追加したログポイントは赤い<font color="red">◆</font>のマークで表され、出力したログはデバッグコンソールから確認できます。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F2197bb27-2634-a0fb-f65f-c2124960bc52.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=152a755a6df9075f47820c9c70e214d7" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F2197bb27-2634-a0fb-f65f-c2124960bc52.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=152a755a6df9075f47820c9c70e214d7" alt="logpoint.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F2197bb27-2634-a0fb-f65f-c2124960bc52.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=a6a30629fb73bda2006f837f20aa83d4 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/2197bb27-2634-a0fb-f65f-c2124960bc52.gif" loading="lazy"></a><br> 上の例では<code>1</code>から（引数で受け取った）<code>N</code>までの総和を計算するプログラムのなかで、その段階的な計算結果をログとして出力させています。</p> <h2 data-sourcepos="29:1-29:30"> <span id="ヒットカウント機能" class="fragment"></span><a href="#%E3%83%92%E3%83%83%E3%83%88%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>ヒットカウント機能</h2> <p data-sourcepos="30:1-31:240">行を指定しヒットカウント機能を使ってブレークポイントを設定すると <strong>「その行をN回目に訪れたタイミングでブレークポイントを発動させる」</strong> といったことが可能になります。<br> これで <strong>「for文の中の<code>i == 15</code>のときの挙動がみたいんだよ～～（ｶﾁｶﾁｶﾁｶﾁ）」</strong> みたいにひたすらデバッグの再生マークを連打する虚無タイムからは卒業できそうです。</p> <p data-sourcepos="33:1-36:221">ヒットカウント機能を使ってブレークポイントを設定する方法は以下の通りです。<br> まず、ブレークポイントを設定したい行の行番号の左側で右クリックします。次に、「条件付きブレークポイントを追加」を選択し、プルダウンメニューから「ヒットカウント」を選びます。最後に、何回目にその行を訪れた時にブレークポイントが発動するかを指定して設定を完了します。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0eb7f8846cb59f515429c68e7a203ac6" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0eb7f8846cb59f515429c68e7a203ac6" alt="Conditional_breakpoints_hit.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=67376fbf911dba13e28fed7cbbac9520 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/ceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif" loading="lazy"></a><br> 上の例では（先ほどと同じ）プログラムの中で<code>res += i</code>の行を3回目に訪れるタイミングでブレークポイントが発動するようにヒットカウント機能を設定しています。</p> <h2 data-sourcepos="37:1-37:45"> <span id="条件付きブレークポイント機能" class="fragment"></span><a href="#%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>条件付きブレークポイント機能</h2> <p data-sourcepos="38:1-39:155">条件付きブレーク機能では、ブレークポイント設定時に条件式を入力し、<strong>その条件式がtrueになったタイミングでブレークポイントが発動するようにできます。</strong><br> <strong>「この値が〇〇になったタイミングでなにかバグってるはずなんだよな～～」</strong> という場合に重宝しそうです！！</p> <p data-sourcepos="41:1-43:274">条件付きブレークポイントは、ブレークポイントを設定したい行の行番号の左側で右クリックをし「条件付きブレークポイントの追加」を選択。その後プルダウンメニューから「式」を選び、そこに条件式を入力することで設定できます。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F5cd063f1-9576-0b33-6add-87fec36ddc6a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c5258e0693569d41c185b2c6a446718" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F5cd063f1-9576-0b33-6add-87fec36ddc6a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c5258e0693569d41c185b2c6a446718" alt="Conditional_breakpoints_eq.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F5cd063f1-9576-0b33-6add-87fec36ddc6a.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=a39f4741ac9eff991760d38e9becee30 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/5cd063f1-9576-0b33-6add-87fec36ddc6a.gif" loading="lazy"></a><br> 上の例では条件式として<code>res == 15</code>を設定しています。するとデバッグ実行時に<code>res == 15</code>が<code>true</code>となったタイミング、すなわち<code>i == 5</code>まで計算し終わったタイミング<sup><a href="#fn-1" id="fnref-1">1</a></sup>でブレークポイントが発動しています。</p> <h2 data-sourcepos="45:1-45:48"> <span id="インラインブレークポイント機能" class="fragment"></span><a href="#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>インラインブレークポイント機能</h2> <p data-sourcepos="46:1-47:90">ブレークポイントは行単位ではなく、<strong>ステートメント単位で設定することもできます。</strong><br> ひとつの行に複数のステートメントが存在してる場合に便利です。</p> <p data-sourcepos="49:1-51:15">インラインブレークポイントはステートメントの先頭で<code>Shift + F9</code>を押すことで設定できます。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fd8a41185-3a59-ce4c-58d3-10902edcde02.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=695b954ab895143a400cc1607f038a20" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fd8a41185-3a59-ce4c-58d3-10902edcde02.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=695b954ab895143a400cc1607f038a20" alt="debug_inline_breakpoints.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fd8a41185-3a59-ce4c-58d3-10902edcde02.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=a84720e50be518f94a608bb62045437b 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/d8a41185-3a59-ce4c-58d3-10902edcde02.gif" loading="lazy"></a><br> 上の例では</p> <ol data-sourcepos="52:1-55:0"> <li data-sourcepos="52:1-52:30">変数<code>a</code>を初期化する</li> <li data-sourcepos="53:1-53:36"> <code>a</code>をインクリメントする</li> <li data-sourcepos="54:1-55:0"> <code>a</code>を出力する</li> </ol> <p data-sourcepos="56:1-56:220">という3つのステートメントが含まれていますが、そのひとつひとつにブレークポイントを設定しているため、そのそれぞれでブレークポイントが発動しています。</p> <h2 data-sourcepos="57:1-57:39"> <span id="関数ブレークポイント機能" class="fragment"></span><a href="#%E9%96%A2%E6%95%B0%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>関数ブレークポイント機能</h2> <p data-sourcepos="58:1-59:158">関数ブレークポイント機能を使えば <strong>「指定した関数名に到達したタイミングでブレークポイントを発動させる」</strong> といったことができます。<br> <strong>「呼び出されてる関数名はわかるけど、それがどこで書かれてるのかわからん！！」</strong> という場合に使えそうです。</p> <p data-sourcepos="61:1-63:315">関数ブレークポイントはブレークポイントセクションヘッダーの+ボタンを押して関数名を入力することで作成できます。作成すると、関数ブレークポイントはブレークポイントセクションに赤い<font color="red">▲</font>で表示されます。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F0df04552-60a0-f1b1-13a1-6d47797440a7.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=96013582cbd7d49d672d8abe4d14479d" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F0df04552-60a0-f1b1-13a1-6d47797440a7.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=96013582cbd7d49d672d8abe4d14479d" alt="debug_function_breakpoints.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F0df04552-60a0-f1b1-13a1-6d47797440a7.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=cda80ff03de1b6e70597f5b297808d03 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/0df04552-60a0-f1b1-13a1-6d47797440a7.gif" loading="lazy"></a><br> 上の例では、<code>sum_to_N</code>という関数名で関数ブレークポイントを設定したことで、（<code>sum_to_N</code>の関数内部にブレークポイントを設定していないのにもかかわらず）実際に<code>sum_to_N</code>に到達したタイミングでブレークポイントが発動しています。</p> <h2 data-sourcepos="64:1-64:42"> <span id="データブレークポイント機能" class="fragment"></span><a href="#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD"><i class="fa fa-link"></i></a>データブレークポイント機能</h2> <p data-sourcepos="65:1-66:149">データブレークポイント機能を使うと、<strong>指定した変数の値が変更/読み取り/アクセスされた場合にブレークポイントを発動させることができます。</strong><br> <strong>「この値いつ変更されてんねん！」</strong> という場合に一つずつステップ実行する必要がなくなるので便利です。</p> <p data-sourcepos="68:1-71:227">データブレークポイント機能はデバッグセッション時の変数セクションから変数を選んで右クリックし、「値が変更されたときに中断する」を選択することで設定できます。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F778687de-943a-e959-2c75-9982364fccee.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=694930edfbb7abf3304a8b3c19bdc49f" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F778687de-943a-e959-2c75-9982364fccee.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=694930edfbb7abf3304a8b3c19bdc49f" alt="debug_data_breakpoints.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F778687de-943a-e959-2c75-9982364fccee.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=6d987057acf0db9ac9cb65717be6e826 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/778687de-943a-e959-2c75-9982364fccee.gif" loading="lazy"></a><br> 上のGIF画像で動かしているのは、0から100までの5の倍数の総和を計算するプログラムです。<br> 最初に変数<code>res</code>にデータブレークポイントを設定したため、<code>res</code>が更新されるタイミング、すなわち<code>i</code>が5の倍数であるときに限ってブレークポイントが発動しています。</p> <h2 data-sourcepos="72:1-72:30"> <span id="デバッグコンソール" class="fragment"></span><a href="#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB"><i class="fa fa-link"></i></a>デバッグコンソール</h2> <p data-sourcepos="73:1-74:123">デバッグコンソールでは、<strong>デバッグ中にプログラムの実行を制御し、コード内の変数や式の評価を行うことができます。</strong><br> つまり、ステップ実行中の変数の状態をより詳細に確認することができるということです。</p> <p data-sourcepos="76:1-79:129">デバッグコンソールを使う方法は、デバッグセッション時にデバッグコンソールに移動して確認・評価したい変数や式を入力するだけです。<br> <a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bd087997e44d1d9f91179206e8d5f157" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bd087997e44d1d9f91179206e8d5f157" alt="debug_console.gif" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=2907578bbd8019f75a7a805407005cc5 1x" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif" loading="lazy"></a><br> 上の例では、ステップ実行中に式をいろいろ入力してデバッグコンソールに出力させています。デバッグ中の変数の状態で<code>i + 10</code>などの式が評価されているのがわかると思います。<br> （最初<code>i</code>を出力させようとしたときはまだ<code>i</code>が宣言される前だったのでエラーが出ています。）</p> <h1 data-sourcepos="81:1-81:14"> <span id="おわりに" class="fragment"></span><a href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB"><i class="fa fa-link"></i></a>おわりに</h1> <p data-sourcepos="82:1-84:72">今回はVS Codeのデバッグについて、あまり知られてないと思われる機能をご紹介しました。かなり痒いところまで手が届く機能ばかりで、やはり何に関しても公式のドキュメントを読むのは大事だなと感じさせられました…<br> 間違いなどありましたらコメントにてご指摘いただけますと幸いです。<br> 最後まで読んでいただきありがとうございました！！</p> <section class="footnotes"> <ol> <li id="fn-1"> <p data-sourcepos="44:7-44:39">1+2+3+4+5=15であることから <a href="#fnref-1" class="">↩</a></p> </li> </ol> </section> </div></div></section><div class="style-1r3vbu3"><div class="style-gg4vpm"><div class="style-1f18zs1"><div class="style-aaiy04"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-buogjo"><div class="style-3fim88"><a href="/_ken_/items/c5aa4841be74b06530b4/likers" aria-label="1644Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">1644</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of users who liked</p></div></div></div><div class="style-izmm4j"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhRBcnRpY2xlLTE3MTQ1NTQGOgZFRg==--65692eb69581dbef6ab2d00eb94653bd880dc885f834d7c96c89525d9fdd6cf2" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1129w32">1610</span></div><div class="style-3fim88"><a href="#comments" aria-label="3Comments" aria-describedby="comments-tooltip" class="style-tzv11m"><span class="material-symbols-outlined style-n5k90r" aria-hidden="true">comment</span>3</a><p role="tooltip" id="comments-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of comments</p></div></div><div class="style-1f18zs1"></div></div></div><div class="style-rwy56f"><p class="style-1nyasl8">Register as a new user and use Qiita more conveniently</p><ol class="style-1i89dtz"><li>You get articles that match your needs</li><li>You can efficiently read back useful information</li><li>You can use dark theme</li></ol><a href="https://help.qiita.com/ja/articles/qiita-login-user" target="_blank" rel="noopener noreferrer" class="style-dzaums">What you can do with signing up</a><div class="style-geahq7"><a href="/signup?callback_action=login_or_signup&redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4&realm=qiita" rel="nofollow" class="style-1dq3d3h">Sign up</a><a href="/login?callback_action=login_or_signup&redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4&realm=qiita" rel="nofollow" class="style-tfrxbl">Login</a></div></div></article><div><aside class="style-itrjxe"></aside></div></div></main><div class="style-1395ble"><div class="style-5jpx49"><div class="style-aaiy04"><div class="style-1duml6f"><svg width="64" height="64" viewBox="0 0 64 64" class="style-ftns26"><circle cx="32" cy="32" r="19" class="circle"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M30.5865 41.1378C31.3272 41.8221 32.6722 41.8319 33.4129 41.1574L33.4718 41.1037C38.5554 36.4713 41.8819 33.4401 41.746 29.6619C41.6875 28.0001 40.8396 26.4068 39.4654 25.4684C37.3743 24.0305 34.8841 24.4462 33.1038 25.7333C32.6936 26.0299 32.321 26.3728 31.9997 26.75C31.6783 26.3727 31.3056 26.03 30.8952 25.7338C29.115 24.4491 26.625 24.0385 24.5341 25.4684C23.1599 26.4068 22.312 28.0001 22.2535 29.6619C22.1268 33.4546 25.4697 36.4947 30.5865 41.1378ZM23.7526 29.7133C23.7953 28.5111 24.4144 27.3665 25.38 26.7071L25.3808 26.7065C27.1492 25.4973 29.4926 26.12 30.8579 27.7227L31.543 28.527C31.7826 28.8082 32.2169 28.8082 32.4565 28.527L33.1416 27.7227C34.5102 26.1161 36.8515 25.4914 38.6155 26.7044L38.6195 26.7071C39.5855 27.3667 40.2046 28.512 40.2469 29.7146L40.247 29.7158C40.2969 31.1036 39.73 32.4647 38.3804 34.1435C37.0091 35.8492 34.9938 37.6874 32.403 40.0483C32.3636 40.0842 32.2314 40.1587 32.0103 40.1572C31.7898 40.1556 31.6512 40.0792 31.6044 40.036L31.5995 40.0315L31.5945 40.027C29.0048 37.677 26.9919 35.8432 25.6225 34.1408C24.2752 32.4657 23.7066 31.1034 23.7526 29.7133Z" class="heart-stroke"></path><path d="M33.4129 41.1574C32.6722 41.8319 31.3272 41.8221 30.5865 41.1378C25.4697 36.4947 22.1268 33.4546 22.2535 29.6619C22.312 28.0001 23.1599 26.4068 24.5341 25.4684C27.1071 23.7089 30.2844 24.7363 31.9997 26.75C33.7151 24.7363 36.8924 23.6991 39.4654 25.4684C40.8396 26.4068 41.6875 28.0001 41.746 29.6619C41.8824 33.4546 38.5297 36.4947 33.4129 41.1574Z" class="heart-fill"></path><g class="particles" style="--rotate:30deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:102deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:174deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:246deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g><g class="particles" style="--rotate:318deg"><circle cx="29" cy="19" r="3" fill="var(--color-yellow60)" class="particle" style="--x:26;--y:7;--duration:150ms"></circle><circle cx="35" cy="23" r="2" fill="var(--color-blue60)" class="particle" style="--x:37;--y:10;--duration:200ms"></circle></g></svg><button aria-label="Like" aria-pressed="false" title="Like" class="style-10ttvi6"></button></div><div class="style-wknrvb"><div class="style-3fim88"><a href="/_ken_/items/c5aa4841be74b06530b4/likers" aria-label="1644Likes" aria-describedby="like-tooltip" class="style-1a6dkvp">1644</a><p role="tooltip" id="like-tooltip" aria-hidden="false" class="style-uw35c3">Go to list of users who liked</p></div></div></div><div class="style-izmm4j"><button aria-haspopup="dialog" aria-expanded="false" aria-controls="ButtonBAhJIhRBcnRpY2xlLTE3MTQ1NTQGOgZFRg==--65692eb69581dbef6ab2d00eb94653bd880dc885f834d7c96c89525d9fdd6cf2" aria-label="Stock" class="style-1xwfn2v" type="button"><svg class="style-100tu0r" height="32" viewBox="0 0 32 32" width="32" aria-hidden="true"><path d="M6.5 5H25.5C25.7761 5 26 5.22386 26 5.5V6.5C26 6.77614 25.7761 7 25.5 7H6.5C6.22386 7 6 6.77614 6 6.5V5.5C6 5.22386 6.22386 5 6.5 5ZM24 19V11.5C24 11.3674 23.9473 11.2402 23.8536 11.1464C23.7598 11.0527 23.6326 11 23.5 11H8.5C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5V19C8 20.8565 8.7375 22.637 10.0503 23.9497C11.363 25.2625 13.1435 26 15 26H17C18.8565 26 20.637 25.2625 21.9497 23.9497C23.2625 22.637 24 20.8565 24 19ZM6.58579 9.58579C6.96086 9.21071 7.46957 9 8 9H24C24.5304 9 25.0391 9.21071 25.4142 9.58579C25.7893 9.96086 26 10.4696 26 11V19C26 21.3869 25.0518 23.6761 23.364 25.364C21.6761 27.0518 19.3869 28 17 28H15C12.6131 28 10.3239 27.0518 8.63604 25.364C6.94821 23.6761 6 21.3869 6 19V11C6 10.4696 6.21071 9.96086 6.58579 9.58579Z"></path></svg></button><span class="style-1vem4tk">1610</span></div><div class="style-79elbk"><button aria-haspopup="menu" aria-expanded="false" aria-controls="ArticleStickyMenuDropdown" class="style-1vr7y3r" aria-label="Open options" type="button"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">more_horiz</span></button><dialog aria-modal="true" aria-labelledby="ArticleDeleteConfirmationModal-label" class="style-oi42s2"><div class="style-2aaf4j"><div class="style-bxc62b"><p id="ArticleDeleteConfirmationModal-label" class="style-1snuvpu">Delete article</p><button type="button" aria-label="" class="style-o8tyjw"><span class="material-symbols-outlined style-v2p563" aria-hidden="true">close</span></button></div><div class="style-6vdptm"><p>Deleted articles cannot be recovered.</p><p>Draft of this article would be also deleted.</p><p>Are you sure you want to delete this article?</p></div><div class="style-111ab2g"><button font-size="16" type="button" class="style-hreeih">Cancel</button><button font-size="16" type="button" class="style-y54waz">Delete<span class="material-symbols-outlined is-fill style-1jvcm2e" aria-hidden="true">delete</span></button></div></div></dialog></div></div></div></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="PersonalArticlePage" data-dom-id="PersonalArticlePage-react-component-042dbb1c-314c-40c1-9f31-4df32b0e8c4a">{"authorAnalyticsTrackingId":"G-VZHZ34WBCF","findyEventPopup":null,"headerBanner":{"bannerDisplayKey":"header_text_banner_displayed","isDisplayable":true},"organizationAnalyticsTrackingId":"G-RBCZ3EYL93","promptLoginMessageImageSrc":"//cdn.qiita.com/assets/public/image-qiitan_for_login_modal-014e085d3e40a240e3fe8d61b70b29a9.png","isPostCompletePromptShow":false,"postCompleteModalImages":[],"isDisplayAdAboveArticle":false,"isDisplayHeaderTextBanner":false,"adventCalendarBeingHeldImageSrc":"//cdn.qiita.com/assets/public/advent_calendar/image-advent_calendar_being_held-bafa166cb2e60037f5e4ba3599642d8f.png","engineerFesta2024LabelImageSrc":"//cdn.qiita.com/assets/public/official_campaigns/engineer_festa_2024/back-label_decoration-38495dd16cb6a3347397f4c3e6fefc62.png","qiitaConferenceImageSrc":"//cdn.qiita.com/assets/public/official_campaigns/qiita_conference_2025/image-conference_2025_ogp-6e0440fbf6b8a9930e6cb68943b8a79c.png","adventCalendarRibbonImageSrc":"//cdn.qiita.com/assets/public/advent_calendar/back-advent_calendar_ribbon-ce0efac1d490b78816e848f879968544.png"}</script> </div><div id="GlobalFooter-react-component-ca428cea-5a2d-4c1e-ab0b-229d26878856"><footer class="style-1geho0x"><div class="style-1vesoht"><div class="style-1xygyrj"><div class="style-j7qwjs"><a href="/"><svg role="img" aria-label="To top Qiita" viewBox="0 0 426.57 130" width="110" height="33.5" class="style-1g0k1wk"><circle cx="167.08" cy="21.4" r="12.28"></circle><path d="M250.81 29.66h23.48v18.9h-23.48z"></path><path d="M300.76 105.26a22.23 22.23 0 01-6.26-.86 12.68 12.68 0 01-5.17-3 14.41 14.41 0 01-3.56-5.76 28 28 0 01-1.3-9.22V48.56h29.61v-18.9h-29.52V3.29h-20.17v83.34q0 11.16 2.83 18.27a27.71 27.71 0 007.7 11.2 26.86 26.86 0 0011.43 5.62 47.56 47.56 0 0012.34 1.53h15.16v-18zM0 61.7a58.6 58.6 0 015-24.21A62.26 62.26 0 0118.73 17.9 63.72 63.72 0 0139 4.78 64.93 64.93 0 0164 0a65 65 0 0124.85 4.78 64.24 64.24 0 0120.38 13.12A62 62 0 01123 37.49a58.6 58.6 0 015 24.21 58.34 58.34 0 01-4 21.46 62.8 62.8 0 01-10.91 18.16l11.1 11.1a10.3 10.3 0 010 14.52 10.29 10.29 0 01-14.64 0l-12.22-12.41a65 65 0 01-15.78 6.65 66.32 66.32 0 01-17.55 2.3 64.63 64.63 0 01-45.23-18A62.82 62.82 0 015 85.81 58.3 58.3 0 010 61.7zm21.64.08a43.13 43.13 0 0012.42 30.63 42.23 42.23 0 0013.43 9.09A41.31 41.31 0 0064 104.8a42 42 0 0030-12.39 42.37 42.37 0 009-13.64 43.43 43.43 0 003.3-17 43.77 43.77 0 00-3.3-17A41.7 41.7 0 0080.55 22 41.78 41.78 0 0064 18.68 41.31 41.31 0 0047.49 22a42.37 42.37 0 00-13.43 9.08 43.37 43.37 0 00-12.42 30.7zM331.89 78a47.59 47.59 0 013.3-17.73 43.22 43.22 0 019.34-14.47A44.25 44.25 0 01359 36a47.82 47.82 0 0118.81-3.58 42.72 42.72 0 019.26 1 46.5 46.5 0 018.22 2.58 40 40 0 017 3.84 44.39 44.39 0 015.71 4.63l1.22-9.47h17.35v85.83h-17.35l-1.17-9.42a42.54 42.54 0 01-5.84 4.67 43.11 43.11 0 01-7 3.79 44.86 44.86 0 01-8.17 2.59 43 43 0 01-9.22 1A47.94 47.94 0 01359 119.9a43.3 43.3 0 01-14.47-9.71 44.17 44.17 0 01-9.34-14.47 47 47 0 01-3.3-17.72zm20.27-.08a29.16 29.16 0 002.17 11.34 27 27 0 005.92 8.88 26.69 26.69 0 008.76 5.76 29.19 29.19 0 0021.44 0 26.11 26.11 0 008.72-5.76 27.57 27.57 0 005.88-8.84 29 29 0 002.16-11.38 28.62 28.62 0 00-2.16-11.22 26.57 26.57 0 00-5.93-8.8 27.68 27.68 0 00-19.51-7.9 28.29 28.29 0 00-10.77 2.05 26.19 26.19 0 00-8.71 5.75 27.08 27.08 0 00-5.84 8.8 28.94 28.94 0 00-2.13 11.31zm-194.97-30.5h19.78v73.54h-19.78zm49.25 0h19.78v73.54h-19.78z"></path><circle cx="216.33" cy="21.4" r="12.28"></circle></svg></a><p class="style-754ift">How developers code is here.</p></div><small class="style-120vwzo">© 2011-2025<span class="style-15fzge">Qiita Inc.</span></small></div><nav aria-label="Footer" class="style-16bbk6m"><div class="style-u4ybgy"><p id="guideHelp" class="style-35ezg3">Guide & Help</p><ul aria-labelledby="guideHelp" class="style-1fhgjcy"><li><a href="/about" class="style-ah54os">About</a></li><li><a href="/terms" class="style-ah54os">Terms</a></li><li><a href="/privacy" class="style-ah54os">Privacy</a></li><li><a href="http://help.qiita.com/ja/articles/qiita-community-guideline" target="_blank" class="style-ah54os">Guideline</a></li><li><a href="https://help.qiita.com/ja/articles/others-brand-guideline" target="_blank" class="style-ah54os">Media Kit</a></li><li><a href="https://github.com/increments/qiita-discussions/discussions/116" target="_blank" class="style-ah54os">Feedback/Requests</a></li><li><a href="https://help.qiita.com" target="_blank" class="style-ah54os">Help</a></li><li><a href="https://business.qiita.com/?utm_source=qiita&utm_medium=referral&utm_content=footer" target="_blank" class="style-ah54os">Advertisement</a></li></ul></div><div class="style-u4ybgy"><p id="contents" class="style-35ezg3">Contents</p><ul aria-labelledby="contents" class="style-1fhgjcy"><li><a href="/release-notes" class="style-ah54os">Release Note</a></li><li><a href="/official-events" class="style-ah54os">Official Event</a></li><li><a href="/official-columns" class="style-ah54os">Official Column</a></li><li><a href="/advent-calendar/2024" class="style-ah54os">Advent Calendar</a></li><li><a href="/qiita-award" class="style-ah54os">Qiita Award</a></li><li><a href="/white_papers/2024" class="style-ah54os">Engineer White Paper</a></li><li><a href="/api/v2/docs" class="style-ah54os">API</a></li></ul></div><div class="style-u4ybgy"><p id="sns" class="style-35ezg3">Official Accounts</p><ul aria-labelledby="sns" class="style-1fhgjcy"><li><a href="https://x.com/qiita" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@Qiita</span></a></li><li><a href="https://x.com/qiita_milestone" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@qiita_milestone</span></a></li><li><a href="https://x.com/qiitapoi" target="_blank" class="style-ah54os"><svg class="style-ox3ag9" viewBox="0 0 20 20" aria-label="X(Twitter)"><path d="m11.68 8.62 6.55-7.62h-1.55l-5.69 6.62-4.55-6.62h-5.25l6.88 10.01-6.88 7.99h1.55l6.01-6.99 4.8 6.99h5.24l-7.13-10.38zm-2.13 2.47-.7-1-5.54-7.92h2.39l4.47 6.4.7 1 5.82 8.32h-2.39l-4.75-6.79z"></path></svg><span class="style-15fzge">@qiitapoi</span></a></li><li><a href="https://www.facebook.com/qiita/" target="_blank" class="style-ah54os">Facebook</a></li><li><a href="https://www.youtube.com/@qiita5366" target="_blank" class="style-ah54os">YouTube</a></li><li><a href="https://open.spotify.com/show/4E7yCLeCLeQUsNqM4HXFXA" target="_blank" class="style-ah54os">Podcast</a></li></ul></div><div class="style-u4ybgy"><p id="service" class="style-35ezg3">Our service</p><ul aria-labelledby="service" class="style-1fhgjcy"><li><a href="https://teams.qiita.com/" target="_blank" class="style-ah54os">Qiita Team</a></li><li><a href="https://zine.qiita.com?utm_source=qiita&utm_medium=referral&utm_content=footer" target="_blank" class="style-ah54os">Qiita Zine</a></li><li><a href="https://suzuri.jp/qiita" target="_blank" class="style-ah54os">Official Shop</a></li></ul></div><div class="style-u4ybgy"><p id="corporate" class="style-35ezg3">Company</p><ul aria-labelledby="corporate" class="style-1fhgjcy"><li><a href="https://corp.qiita.com/company" target="_blank" class="style-ah54os">About Us</a></li><li><a href="https://corp.qiita.com/jobs/" target="_blank" class="style-ah54os">Careers</a></li><li><a href="https://blog.qiita.com" target="_blank" class="style-ah54os">Qiita Blog</a></li><li><a href="https://corp.qiita.com/releases/" target="_blank" class="style-ah54os">News Release</a></li></ul></div></nav></div></footer></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="GlobalFooter" data-dom-id="GlobalFooter-react-component-ca428cea-5a2d-4c1e-ab0b-229d26878856">{"currentYear":2025,"pathInfo":"/_ken_/items/c5aa4841be74b06530b4","bannerUrl":"//cdn.qiita.com/assets/public/banner-qiita_conference-c746f76f279d57268fa51a1f5b7c9151.png","adventCalendarBannerUrl":"//cdn.qiita.com/assets/public/banner-qiita_advent_calendar_2024-8fefcb4d8f1b460321d6efd20e955784.png","latestHeldAdventCalendarYear":2024,"latestHeldWhitePaperYear":2024,"qiitaTeamLandingPageRootUrl":"https://teams.qiita.com/"}</script> <div id="Snackbar-react-component-9a73c9dc-d051-4b9b-8fc8-dd75d5f2a3c9"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="Snackbar" data-dom-id="Snackbar-react-component-9a73c9dc-d051-4b9b-8fc8-dd75d5f2a3c9">{}</script> <div id="LoginModal-react-component-c0abcd3d-e300-40ea-8cb3-259c5feedb7a"></div> <script type="application/json" class="js-react-on-rails-component" data-component-name="LoginModal" data-dom-id="LoginModal-react-component-c0abcd3d-e300-40ea-8cb3-259c5feedb7a">{"imageUrl":"//cdn.qiita.com/assets/public/image-qiitan_for_login_modal_glimpse-c148ec9e4debf1f4b880deec194b6fc8.png","githubAuthUrl":"https://oauth.qiita.com/auth/github?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4","googleAuthUrl":"https://oauth.qiita.com/auth/google?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4","twitterAuthUrl":"https://oauth.qiita.com/auth/twitter?callback_action=login_or_signup\u0026realm=qiita\u0026redirect_to=%2F_ken_%2Fitems%2Fc5aa4841be74b06530b4"}</script> </div><div id="dataContainer" style="display: none;" data-config="{"actionPath":"public/items#show","settings":{"analyticsTrackingId":"G-KEVS5DBRVN","tagManagerId":"GTM-W9W5TX4","assetsMap":{},"csrfToken":"MzqR6mZltgvLtDML9_j42SSRuLMCTq8NTmS1nUsGcZiLRMsvmU0twK3V-WlMiJzCxYBZU73nwky-VfzMNZ40YA","locale":"en","pushOne":{"accessToken":"4bc4bb057a0601d388a7b9e499ca2307e9eb4fc172804e310c59e511d7cac356","dialogImageUrl":"//cdn.qiita.com/assets/public/push_notification/image-qiitan-572179a3bbde375850422ea48b2b6272.png"},"textlint":{"workerUrl":"//cdn.qiita.com/assets/public/textlint-worker-43e261f6b1d6a0cfbf45d36ef7f16297.min.js"}},"currentUser":null,"additionalParams":{"query_parameters":{},"path_parameters":{"controller":"public/items","action":"show","user_id":"_ken_","type":"items","id":"c5aa4841be74b06530b4"},"request_id":"66617118-e203-406e-8675-136a71bbb7fc","user_id":null}}" /></body></html><script type="application/json" data-js-react-on-rails-store="AppStoreWithReactOnRails">{"snackbar":{"type":"","body":"","isActive":false},"adventCalendar":{"adventCalendar":{"currentMonth":3,"isAdventCalendarBeingHeld":false,"isCalendarCreatable":false,"isLatestHeldYear":true,"isPreRegistering":false,"isRankingBeingHeld":false,"isSubscribable":false,"year":2024,"years":[2024,2023,2022,2021,2020,2019,2018,2017,2016,2015,2014,2013,2012,2011]}},"article":{"article":{"body":"\u003ch1 data-sourcepos=\"1:1-1:14\"\u003e\n\u003cspan id=\"はじめに\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eはじめに\u003c/h1\u003e\n\u003cp data-sourcepos=\"2:1-4:181\"\u003eこんにちは、kenです。\u003cbr\u003e\nGWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたら\u003ca href=\"https://code.visualstudio.com/docs/editor/debugging\" rel=\"nofollow noopener\" target=\"_blank\"\u003eデバッグ\u003c/a\u003eに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。\u003cbr\u003e\nおそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？）\u003c/p\u003e\n\u003cp data-sourcepos=\"6:1-6:118\"\u003e以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。\u003c/p\u003e\n\u003cp data-sourcepos=\"8:1-8:51\"\u003e\u003ciframe id=\"qiita-embed-content__8c6978756ca41b92985b05630ef438f6\" src=\"https://qiita.com/embed-contents/link-card#qiita-embed-content__8c6978756ca41b92985b05630ef438f6\" data-content=\"https%3A%2F%2Fcode.visualstudio.com%2Fdocs%2Feditor%2Fdebugging\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\" style=\"width:100%;\" height=\"29\"\u003e\n\u003c/iframe\u003e\n\u003c/p\u003e\n\u003ch2 data-sourcepos=\"10:1-10:9\"\u003e\n\u003cspan id=\"注意\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E6%B3%A8%E6%84%8F\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e注意\u003c/h2\u003e\n\u003cdiv data-sourcepos=\"11:1-14:3\" class=\"note warn\"\u003e\n\u003cspan class=\"fa fa-fw fa-exclamation-circle\"\u003e\u003c/span\u003e\u003cdiv\u003e\n\u003cul data-sourcepos=\"12:1-13:222\"\u003e\n\u003cli data-sourcepos=\"12:1-12:101\"\u003eこれから紹介する機能は言語によって使えたり、使えなかったりします。\u003c/li\u003e\n\u003cli data-sourcepos=\"13:1-13:222\"\u003e今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003ch1 data-sourcepos=\"17:1-17:41\"\u003e\n\u003cspan id=\"デバッグで使える便利な機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E4%BE%BF%E5%88%A9%E3%81%AA%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eデバッグで使える便利な機能\u003c/h1\u003e\n\u003ch2 data-sourcepos=\"19:1-19:27\"\u003e\n\u003cspan id=\"ログポイント機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%83%AD%E3%82%B0%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eログポイント機能\u003c/h2\u003e\n\u003cp data-sourcepos=\"20:1-23:151\"\u003e行を指定しログポイントを追加すると、その行を訪れたタイミングでログを出力できます。\u003cbr\u003e\nもちろんログ内には\u003ccode\u003e{式}\u003c/code\u003eという書式を使えば式も含めることもできます。\u003cbr\u003e\n\u003cstrong\u003e既存のコードに修正を加えることなく、ログを出力できるのは嬉しいですね！！\u003c/strong\u003e\u003cbr\u003e\nこれで \u003cstrong\u003e「プリントデバッグしたprint行を消し忘れてPRあげちゃった……」\u003c/strong\u003e みたいなことがなくなりそうです。\u003c/p\u003e\n\u003cp data-sourcepos=\"25:1-28:192\"\u003eログポイントを設定する方法は、ログポイントを出したい行の行番号の左側で右クリックし「ログポイントを追加」を選択。その後出したいログの内容を入力するだけです。\u003cbr\u003e\n追加したログポイントは赤い\u003cfont color=\"red\"\u003e◆\u003c/font\u003eのマークで表され、出力したログはデバッグコンソールから確認できます。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F2197bb27-2634-a0fb-f65f-c2124960bc52.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=152a755a6df9075f47820c9c70e214d7\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F2197bb27-2634-a0fb-f65f-c2124960bc52.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=152a755a6df9075f47820c9c70e214d7\" alt=\"logpoint.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F2197bb27-2634-a0fb-f65f-c2124960bc52.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=a6a30629fb73bda2006f837f20aa83d4 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/2197bb27-2634-a0fb-f65f-c2124960bc52.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上の例では\u003ccode\u003e1\u003c/code\u003eから（引数で受け取った）\u003ccode\u003eN\u003c/code\u003eまでの総和を計算するプログラムのなかで、その段階的な計算結果をログとして出力させています。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"29:1-29:30\"\u003e\n\u003cspan id=\"ヒットカウント機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%83%92%E3%83%83%E3%83%88%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eヒットカウント機能\u003c/h2\u003e\n\u003cp data-sourcepos=\"30:1-31:240\"\u003e行を指定しヒットカウント機能を使ってブレークポイントを設定すると \u003cstrong\u003e「その行をN回目に訪れたタイミングでブレークポイントを発動させる」\u003c/strong\u003e といったことが可能になります。\u003cbr\u003e\nこれで \u003cstrong\u003e「for文の中の\u003ccode\u003ei == 15\u003c/code\u003eのときの挙動がみたいんだよ～～（ｶﾁｶﾁｶﾁｶﾁ）」\u003c/strong\u003e みたいにひたすらデバッグの再生マークを連打する虚無タイムからは卒業できそうです。\u003c/p\u003e\n\u003cp data-sourcepos=\"33:1-36:221\"\u003eヒットカウント機能を使ってブレークポイントを設定する方法は以下の通りです。\u003cbr\u003e\nまず、ブレークポイントを設定したい行の行番号の左側で右クリックします。次に、「条件付きブレークポイントを追加」を選択し、プルダウンメニューから「ヒットカウント」を選びます。最後に、何回目にその行を訪れた時にブレークポイントが発動するかを指定して設定を完了します。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=0eb7f8846cb59f515429c68e7a203ac6\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=0eb7f8846cb59f515429c68e7a203ac6\" alt=\"Conditional_breakpoints_hit.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=67376fbf911dba13e28fed7cbbac9520 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/ceb7d864-b6cb-d343-c1c3-44ec575e5f99.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上の例では（先ほどと同じ）プログラムの中で\u003ccode\u003eres += i\u003c/code\u003eの行を3回目に訪れるタイミングでブレークポイントが発動するようにヒットカウント機能を設定しています。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"37:1-37:45\"\u003e\n\u003cspan id=\"条件付きブレークポイント機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e条件付きブレークポイント機能\u003c/h2\u003e\n\u003cp data-sourcepos=\"38:1-39:155\"\u003e条件付きブレーク機能では、ブレークポイント設定時に条件式を入力し、\u003cstrong\u003eその条件式がtrueになったタイミングでブレークポイントが発動するようにできます。\u003c/strong\u003e\u003cbr\u003e\n\u003cstrong\u003e「この値が〇〇になったタイミングでなにかバグってるはずなんだよな～～」\u003c/strong\u003e という場合に重宝しそうです！！\u003c/p\u003e\n\u003cp data-sourcepos=\"41:1-43:274\"\u003e条件付きブレークポイントは、ブレークポイントを設定したい行の行番号の左側で右クリックをし「条件付きブレークポイントの追加」を選択。その後プルダウンメニューから「式」を選び、そこに条件式を入力することで設定できます。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F5cd063f1-9576-0b33-6add-87fec36ddc6a.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=6c5258e0693569d41c185b2c6a446718\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F5cd063f1-9576-0b33-6add-87fec36ddc6a.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=6c5258e0693569d41c185b2c6a446718\" alt=\"Conditional_breakpoints_eq.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F5cd063f1-9576-0b33-6add-87fec36ddc6a.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=a39f4741ac9eff991760d38e9becee30 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/5cd063f1-9576-0b33-6add-87fec36ddc6a.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上の例では条件式として\u003ccode\u003eres == 15\u003c/code\u003eを設定しています。するとデバッグ実行時に\u003ccode\u003eres == 15\u003c/code\u003eが\u003ccode\u003etrue\u003c/code\u003eとなったタイミング、すなわち\u003ccode\u003ei == 5\u003c/code\u003eまで計算し終わったタイミング\u003csup\u003e\u003ca href=\"#fn-1\" id=\"fnref-1\"\u003e1\u003c/a\u003e\u003c/sup\u003eでブレークポイントが発動しています。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"45:1-45:48\"\u003e\n\u003cspan id=\"インラインブレークポイント機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eインラインブレークポイント機能\u003c/h2\u003e\n\u003cp data-sourcepos=\"46:1-47:90\"\u003eブレークポイントは行単位ではなく、\u003cstrong\u003eステートメント単位で設定することもできます。\u003c/strong\u003e\u003cbr\u003e\nひとつの行に複数のステートメントが存在してる場合に便利です。\u003c/p\u003e\n\u003cp data-sourcepos=\"49:1-51:15\"\u003eインラインブレークポイントはステートメントの先頭で\u003ccode\u003eShift + F9\u003c/code\u003eを押すことで設定できます。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fd8a41185-3a59-ce4c-58d3-10902edcde02.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=695b954ab895143a400cc1607f038a20\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fd8a41185-3a59-ce4c-58d3-10902edcde02.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=695b954ab895143a400cc1607f038a20\" alt=\"debug_inline_breakpoints.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2Fd8a41185-3a59-ce4c-58d3-10902edcde02.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=a84720e50be518f94a608bb62045437b 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/d8a41185-3a59-ce4c-58d3-10902edcde02.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上の例では\u003c/p\u003e\n\u003col data-sourcepos=\"52:1-55:0\"\u003e\n\u003cli data-sourcepos=\"52:1-52:30\"\u003e変数\u003ccode\u003ea\u003c/code\u003eを初期化する\u003c/li\u003e\n\u003cli data-sourcepos=\"53:1-53:36\"\u003e\n\u003ccode\u003ea\u003c/code\u003eをインクリメントする\u003c/li\u003e\n\u003cli data-sourcepos=\"54:1-55:0\"\u003e\n\u003ccode\u003ea\u003c/code\u003eを出力する\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp data-sourcepos=\"56:1-56:220\"\u003eという3つのステートメントが含まれていますが、そのひとつひとつにブレークポイントを設定しているため、そのそれぞれでブレークポイントが発動しています。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"57:1-57:39\"\u003e\n\u003cspan id=\"関数ブレークポイント機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E9%96%A2%E6%95%B0%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003e関数ブレークポイント機能\u003c/h2\u003e\n\u003cp data-sourcepos=\"58:1-59:158\"\u003e関数ブレークポイント機能を使えば \u003cstrong\u003e「指定した関数名に到達したタイミングでブレークポイントを発動させる」\u003c/strong\u003e といったことができます。\u003cbr\u003e\n\u003cstrong\u003e「呼び出されてる関数名はわかるけど、それがどこで書かれてるのかわからん！！」\u003c/strong\u003e という場合に使えそうです。\u003c/p\u003e\n\u003cp data-sourcepos=\"61:1-63:315\"\u003e関数ブレークポイントはブレークポイントセクションヘッダーの+ボタンを押して関数名を入力することで作成できます。作成すると、関数ブレークポイントはブレークポイントセクションに赤い\u003cfont color=\"red\"\u003e▲\u003c/font\u003eで表示されます。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F0df04552-60a0-f1b1-13a1-6d47797440a7.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=96013582cbd7d49d672d8abe4d14479d\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F0df04552-60a0-f1b1-13a1-6d47797440a7.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=96013582cbd7d49d672d8abe4d14479d\" alt=\"debug_function_breakpoints.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F0df04552-60a0-f1b1-13a1-6d47797440a7.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=cda80ff03de1b6e70597f5b297808d03 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/0df04552-60a0-f1b1-13a1-6d47797440a7.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上の例では、\u003ccode\u003esum_to_N\u003c/code\u003eという関数名で関数ブレークポイントを設定したことで、（\u003ccode\u003esum_to_N\u003c/code\u003eの関数内部にブレークポイントを設定していないのにもかかわらず）実際に\u003ccode\u003esum_to_N\u003c/code\u003eに到達したタイミングでブレークポイントが発動しています。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"64:1-64:42\"\u003e\n\u003cspan id=\"データブレークポイント機能\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eデータブレークポイント機能\u003c/h2\u003e\n\u003cp data-sourcepos=\"65:1-66:149\"\u003eデータブレークポイント機能を使うと、\u003cstrong\u003e指定した変数の値が変更/読み取り/アクセスされた場合にブレークポイントを発動させることができます。\u003c/strong\u003e\u003cbr\u003e\n\u003cstrong\u003e「この値いつ変更されてんねん！」\u003c/strong\u003e という場合に一つずつステップ実行する必要がなくなるので便利です。\u003c/p\u003e\n\u003cp data-sourcepos=\"68:1-71:227\"\u003eデータブレークポイント機能はデバッグセッション時の変数セクションから変数を選んで右クリックし、「値が変更されたときに中断する」を選択することで設定できます。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F778687de-943a-e959-2c75-9982364fccee.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=694930edfbb7abf3304a8b3c19bdc49f\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F778687de-943a-e959-2c75-9982364fccee.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=694930edfbb7abf3304a8b3c19bdc49f\" alt=\"debug_data_breakpoints.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F778687de-943a-e959-2c75-9982364fccee.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=6d987057acf0db9ac9cb65717be6e826 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/778687de-943a-e959-2c75-9982364fccee.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上のGIF画像で動かしているのは、0から100までの5の倍数の総和を計算するプログラムです。\u003cbr\u003e\n最初に変数\u003ccode\u003eres\u003c/code\u003eにデータブレークポイントを設定したため、\u003ccode\u003eres\u003c/code\u003eが更新されるタイミング、すなわち\u003ccode\u003ei\u003c/code\u003eが5の倍数であるときに限ってブレークポイントが発動しています。\u003c/p\u003e\n\u003ch2 data-sourcepos=\"72:1-72:30\"\u003e\n\u003cspan id=\"デバッグコンソール\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eデバッグコンソール\u003c/h2\u003e\n\u003cp data-sourcepos=\"73:1-74:123\"\u003eデバッグコンソールでは、\u003cstrong\u003eデバッグ中にプログラムの実行を制御し、コード内の変数や式の評価を行うことができます。\u003c/strong\u003e\u003cbr\u003e\nつまり、ステップ実行中の変数の状態をより詳細に確認することができるということです。\u003c/p\u003e\n\u003cp data-sourcepos=\"76:1-79:129\"\u003eデバッグコンソールを使う方法は、デバッグセッション時にデバッグコンソールに移動して確認・評価したい変数や式を入力するだけです。\u003cbr\u003e\n\u003ca href=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=bd087997e44d1d9f91179206e8d5f157\" target=\"_blank\" rel=\"nofollow noopener\"\u003e\u003cimg src=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;s=bd087997e44d1d9f91179206e8d5f157\" alt=\"debug_console.gif\" srcset=\"https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F1649218%2F62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif?ixlib=rb-4.0.0\u0026amp;auto=format\u0026amp;gif-q=60\u0026amp;q=75\u0026amp;w=1400\u0026amp;fit=max\u0026amp;s=2907578bbd8019f75a7a805407005cc5 1x\" data-canonical-src=\"https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1649218/62538bc8-e1eb-0c2a-9ce1-f285628c984c.gif\" loading=\"lazy\"\u003e\u003c/a\u003e\u003cbr\u003e\n上の例では、ステップ実行中に式をいろいろ入力してデバッグコンソールに出力させています。デバッグ中の変数の状態で\u003ccode\u003ei + 10\u003c/code\u003eなどの式が評価されているのがわかると思います。\u003cbr\u003e\n（最初\u003ccode\u003ei\u003c/code\u003eを出力させようとしたときはまだ\u003ccode\u003ei\u003c/code\u003eが宣言される前だったのでエラーが出ています。）\u003c/p\u003e\n\u003ch1 data-sourcepos=\"81:1-81:14\"\u003e\n\u003cspan id=\"おわりに\" class=\"fragment\"\u003e\u003c/span\u003e\u003ca href=\"#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB\"\u003e\u003ci class=\"fa fa-link\"\u003e\u003c/i\u003e\u003c/a\u003eおわりに\u003c/h1\u003e\n\u003cp data-sourcepos=\"82:1-84:72\"\u003e今回はVS Codeのデバッグについて、あまり知られてないと思われる機能をご紹介しました。かなり痒いところまで手が届く機能ばかりで、やはり何に関しても公式のドキュメントを読むのは大事だなと感じさせられました…\u003cbr\u003e\n間違いなどありましたらコメントにてご指摘いただけますと幸いです。\u003cbr\u003e\n最後まで読んでいただきありがとうございました！！\u003c/p\u003e\n\u003csection class=\"footnotes\"\u003e\n\u003col\u003e\n\u003cli id=\"fn-1\"\u003e\n\u003cp data-sourcepos=\"44:7-44:39\"\u003e1+2+3+4+5=15であることから \u003ca href=\"#fnref-1\" class=\"\"\u003e↩\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/section\u003e\n","comments":{"totalCount":3},"createdAt":"2023-05-08T00:57:44Z","elapsedYearsFromLastModifiedAt":1,"encryptedId":"BAhJIhRBcnRpY2xlLTE3MTQ1NTQGOgZFRg==--65692eb69581dbef6ab2d00eb94653bd880dc885f834d7c96c89525d9fdd6cf2","isBanned":false,"isDeprecated":true,"isDestroyableByViewer":false,"isEditRequestReadableByViewer":true,"isEditRequestSendableByViewer":true,"isLikableByViewer":true,"isLikedByViewer":false,"isPublic":true,"isSlide":false,"isStockableByViewer":true,"isStockedByViewer":false,"isSubscribableByViewer":false,"isSubscribedByViewer":false,"isUpdatableByViewer":false,"isUpdated":true,"lastModifiedAt":"2023-05-09T12:33:31Z","publishedAt":"2023-05-09T00:58:01Z","likesCount":1644,"linkUrl":"https://qiita.com/_ken_/items/c5aa4841be74b06530b4","organization":{"encryptedId":"BAhJIhVPcmdhbml6YXRpb24tNzE2BjoGRUY=--7c5bc7c9b6079ee2220ec8bb885c1d9b17c8d934a45790d74587369557b60097","isFollowedByViewer":false,"name":"株式会社HRBrain","urlName":"hrbrain","logoUrl":"https://qiita-organization-images.imgix.net/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fqiita-organization-image%2F38278ba7fc91d1f8b1cba1cfc67305eea67fb198%2Foriginal.jpg%3F1732098336?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026s=665427981863eb89e2972209469fbb2a","logoUrlOriginal":"https://s3-ap-northeast-1.amazonaws.com/qiita-organization-image/38278ba7fc91d1f8b1cba1cfc67305eea67fb198/original.jpg?1732098336"},"stockedCount":1610,"title":"君はVS Codeのデバッグの知られざる機能について知っているか","toc":"\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\"\u003eはじめに\u003c/a\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"#%E6%B3%A8%E6%84%8F\"\u003e注意\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B%E4%BE%BF%E5%88%A9%E3%81%AA%E6%A9%9F%E8%83%BD\"\u003eデバッグで使える便利な機能\u003c/a\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%83%AD%E3%82%B0%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003eログポイント機能\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%83%92%E3%83%83%E3%83%88%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003eヒットカウント機能\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e条件付きブレークポイント機能\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003eインラインブレークポイント機能\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E9%96%A2%E6%95%B0%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003e関数ブレークポイント機能\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD\"\u003eデータブレークポイント機能\u003c/a\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB\"\u003eデバッグコンソール\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003ca href=\"#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB\"\u003eおわりに\u003c/a\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","totalPv":207828,"uuid":"c5aa4841be74b06530b4","banReason":null,"adventCalendarItem":null,"author":{"encryptedId":"BAhJIhFVc2VyLTE2NDkyMTgGOgZFRg==--7e00a13cfc027c07fc40402bfd93b9d8132c800f2933dcf4e241bde6b9b5a627","isBlockingViewer":false,"isFollowableByViewer":true,"isFollowedByViewer":false,"isTweetWebNotificationReceivable":true,"profileImageUrlW48":"https://qiita-user-profile-images.imgix.net/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fqiita-image-store%2F0%2F1649218%2Fc47f682925d341561320f61a28090e752f97d48e%2Flarge.png%3F1656312130?ixlib=rb-4.0.0\u0026auto=compress%2Cformat\u0026lossless=0\u0026w=48\u0026s=6a69cb32c450488e467fb024b8667a8b","profileImageUrlOriginal":"https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/1649218/c47f682925d341561320f61a28090e752f97d48e/large.png?1656312130","urlName":"_ken_","twitterUrlName":"ken_hassy","name":"ken","organizations":{"edges":[{"node":{"urlName":"hrbrain"}}]}},"tags":[{"name":"debug","urlName":"debug"},{"name":"初心者","urlName":"%e5%88%9d%e5%bf%83%e8%80%85"},{"name":"VSCode","urlName":"vscode"}],"followingLikers":[],"recentlyFollowingLikers":[],"postingCampaign":null},"comments":[],"client":null,"adsEventEmitter":null}}</script>