[{"data":1,"prerenderedAt":72},["ShallowReactive",2],{"content:\u002Farticles:7260":3},{"item":4,"md":15,"html":16,"menu":17,"excerpt":25,"related":26},{"title":5,"len":6,"tags":7,"id":9,"time":10,"modifyTime":11,"encrypt":12,"showComments":13,"customSlug":14},"web开发调试：打断点",2562,[8],"前端",7260,1666027678610,1679559778337,false,true,"",null,"\u003Cp data-marked-line=\"1\">  打断点是debug的手段之一，在各类开发语言中都有应用。本篇文章将介绍web前端开发中，断点的几种操作。\u003C\u002Fp>\n\u003Ch1 data-marked-line=\"3\">\u003Csup class=\"fake-head\" id=\"%E8%AE%B2%E8%A7%A3\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E8%AE%B2%E8%A7%A3\">讲解\u003C\u002Fa>\u003C\u002Fh1>\u003Cblockquote data-marked-line=\"4\">\n\u003Cp data-marked-line=\"4\">参考自\u003Ca href=\"https:\u002F\u002Fjavascript.info\u002Fdebugging-chrome#tracing-the-execution\" target=\"_blank\">javascript.info\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp data-marked-line=\"6\">浏览器\u002Fvscode断点调试有如下操作：\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"5种操作\" title=\"5种操作\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FQNBJplhjF6HzkPZ.png\"\u002F>\u003Csmall class=\"desc\">5种操作\u003C\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp data-marked-line=\"8\">  可以本地新建一个html文件，写一些测试代码，拖拽到浏览器中，打开开发者工具中的\u003Cem>源代码\u003C\u002Fem>栏，打断点一一验证下面的操作：\u003C\u002Fp>\n\u003Cul data-marked-line=\"10\">\n\u003Cli>\u003Cp data-marked-line=\"10\">\u003Cspan style=\"display: inline-block;background-image: url(https:\u002F\u002Fjavascript.info\u002Farticle\u002Fdebugging-chrome\u002FlargeIcons.svg);height: 18px;width: 18px;background-position: -146px -168px;\">\u003C\u002Fspan> \u003Cstrong>Resume\u003C\u002Fstrong>: \u003Cspan style=\"text-decoration: underline\">继续执行，热键\u003Ccode>F8\u003C\u002Fcode>\u003C\u002Fspan>\n  继续执行被中断的javascript。除非遇到断点，否则不会再次中断。\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp data-marked-line=\"13\">\u003Cspan style=\"display: inline-block;background-image: url(https:\u002F\u002Fjavascript.info\u002Farticle\u002Fdebugging-chrome\u002FlargeIcons.svg);height: 18px;width: 18px;background-position: -200px -190px;\">\u003C\u002Fspan> \u003Cstrong>Step\u003C\u002Fstrong>：\u003Cspan style=\"text-decoration: underline\">执行下一个命令，热键\u003Ccode>F9\u003C\u002Fcode>\u003C\u002Fspan>\n  执行下一个javascript语句，按一次\u003Ccode>F9\u003C\u002Fcode>就会执行一条语句，通常用于一小段代码，逐行调试。\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp data-marked-line=\"16\">\u003Cspan style=\"display: inline-block;background-image: url(https:\u002F\u002Fjavascript.info\u002Farticle\u002Fdebugging-chrome\u002FlargeIcons.svg);height: 18px;width: 18px;background-position: -62px -192px;\">\u003C\u002Fspan> \u003Cstrong>Step Over\u003C\u002Fstrong>：\u003Cspan style=\"text-decoration: underline\">执行下一个命令，但是不会进入到函数内，热键\u003Ccode>F10\u003C\u002Fcode>\u003C\u002Fspan>\n  和\u003Cstrong>Step\u003C\u002Fstrong>的效果类似，但是当语句是一个函数时(非内置函数，例如\u003Ccode>alert()\u003C\u002Fcode>)，有所不同。\n  区别在于：遇到函数时，\u003Cstrong>Step\u003C\u002Fstrong>会继续执行到函数内部，然后在该函数内部的第一行中断。而\u003Cstrong>Step Over\u003C\u002Fstrong>则会直接把函数执行完毕(若函数执行过程中遇到另外的断点，则仍会中断)，然后在下一个语句中断。通常，当断点处于一个\u003Cem>函数调用\u003C\u002Fem>，而你不需要知道此函数做了什么，则可以使用\u003Cstrong>Step Over\u003C\u002Fstrong>让该函数立即执行完成。\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp data-marked-line=\"20\">\u003Cspan style=\"display: inline-block;background-image: url(https:\u002F\u002Fjavascript.info\u002Farticle\u002Fdebugging-chrome\u002FlargeIcons.svg);height: 18px;width: 18px;background-position: -4px -194px;\">\u003C\u002Fspan> \u003Cstrong>Step Into\u003C\u002Fstrong>：\u003Cspan style=\"text-decoration: underline\">按需等待，执行下一个异步命令，热键\u003Ccode>F11\u003C\u002Fcode>\u003C\u002Fspan>\n  与\u003Cstrong>Step\u003C\u002Fstrong>基本一样，唯一的区别是：如果代码中断在\u003Cem>异步操作\u003C\u002Fem>，例如中断在\u003Ccode>setTimeout(foo, 1000);\u003C\u002Fcode>，假设下一行是\u003Ccode>bar();\u003C\u002Fcode>，并且后续无其他代码与断点：\u003C\u002Fp>\n\u003Cul data-marked-line=\"22\">\n\u003Cli>使用\u003Cstrong>Step\u003C\u002Fstrong>，则会中断在\u003Ccode>bar()\u003C\u002Fcode>，约1秒后，再中断在\u003Ccode>foo\u003C\u002Fcode>。\u003C\u002Fli>\n\u003Cli>使用\u003Cstrong>Step Into\u003C\u002Fstrong>，则会跳过\u003Ccode>bar()\u003C\u002Fcode>，约1秒后，中断在\u003Ccode>foo\u003C\u002Fcode>。\u003Cbr>通常，如果你只想调试\u003Ccode>foo\u003C\u002Fcode>，则可以使用\u003Cstrong>Step Into\u003C\u002Fstrong>，效果相当于在\u003Ccode>foo\u003C\u002Fcode>处打了一个断点，并且使用\u003Cstrong>Resume\u003C\u002Fstrong>。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\u003Cp data-marked-line=\"26\">\u003Cspan style=\"display: inline-block;background-image: url(https:\u002F\u002Fjavascript.info\u002Farticle\u002Fdebugging-chrome\u002FlargeIcons.svg);height: 18px;width: 18px;background-position: -32px -194px;\">\u003C\u002Fspan> \u003Cstrong>Step Out\u003C\u002Fstrong>：\u003Cspan style=\"text-decoration: underline\">继续执行，直到当前函数执行完毕。热键\u003Ccode>Shift + F11\u003C\u002Fcode>\u003C\u002Fspan>\n  使用场景是：如果你使用\u003Cstrong>Step\u003C\u002Fstrong>进入到了一个函数内部，但是并不想调试它，也就是说你本来想用\u003Cstrong>Step Over\u003C\u002Fstrong>，这时就可以使用\u003Cstrong>Step Out\u003C\u002Fstrong>，尽快结束该函数。\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch1 data-marked-line=\"30\">\u003Csup class=\"fake-head\" id=\"%E4%BD%BF%E7%94%A8vscode%E8%B0%83%E8%AF%95\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E4%BD%BF%E7%94%A8vscode%E8%B0%83%E8%AF%95\">使用vscode调试\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"31\">  之前我都是直接浏览器打开开发工具，在\u003Cem>源代码\u003C\u002Fem>栏找文件，打断点。里面的文件一般是打包后的，没有在vscode里看起来清晰。其实vscode可以很方便地调试web应用，相比于用浏览器开发工具进行调试，体验更好。\n  前端项目里\u003Ccode>package.json\u003C\u002Fcode>，鼠标放到script上，点击\u003Ccode>Debug Script\u003C\u002Fcode>，就可以vscode帮我们自动打开了一个debug终端，和一个调试栏，与浏览器开发工具中\u003Cem>源代码\u003C\u002Fem>栏类似。\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"很方便\" title=\"很方便\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FeBx97kIZ14JgQAf.png\"\u002F>\u003Csmall class=\"desc\">很方便\u003C\u002Fsmall>\u003C\u002Fspan>\n  例如，打断点并修改数据：\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"修改\" title=\"修改\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FZbv1U9C2QVL8SIc.png\"\u002F>\u003Csmall class=\"desc\">修改\u003C\u002Fsmall>\u003C\u002Fspan>\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"结果\" title=\"结果\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FtvNdEqa8765QJUi.png\"\u002F>\u003Csmall class=\"desc\">结果\u003C\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fp>\n",[18,22],{"size":19,"text":20,"url":21},"big","讲解","%E8%AE%B2%E8%A7%A3",{"size":19,"text":23,"url":24},"使用vscode调试","%E4%BD%BF%E7%94%A8vscode%E8%B0%83%E8%AF%95","打断点是debug的手段之一，在各类开发语言中都有应用。本篇文章将介绍web前端开发中，断点的几种操作。 讲解 参考自javascript.info 浏览器\u002Fvscode断点调试有如下操作： 可以本地新建一个html文件，写一些测试代码，拖拽到浏览器中，打开开发者工具中的源代码栏，打断点一一验证下面…",[27,39,48,55,62],{"item":28,"count":38},{"title":29,"len":30,"tags":31,"id":34,"time":35,"modifyTime":36,"showComments":13,"encrypt":12,"customSlug":37},"关于本站的重构 (又双叒叕重构了)",1503,[8,32,33],"vue","杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":40,"count":38},{"title":41,"len":42,"tags":43,"id":45,"time":46,"modifyTime":47,"showComments":13,"encrypt":12,"customSlug":14},"用React实现跟随鼠标的3D透视效果",863,[8,44],"react",6856,1731479185023,1734350101562,{"item":49,"count":38},{"title":50,"len":51,"tags":52,"id":53,"time":54,"modifyTime":54,"encrypt":12,"showComments":13,"customSlug":14},"vue3用于管理axios异步请求一致性的功能函数",3227,[32,8],9820,1725014139074,{"item":56,"count":38},{"title":57,"len":58,"tags":59,"id":60,"time":61,"modifyTime":61,"encrypt":12,"showComments":13,"customSlug":14},"Nuxt3创建SSE server以及client的简明教程",1905,[8,32],5449,1720261091923,{"item":63,"count":38},{"title":64,"len":65,"tags":66,"id":69,"time":70,"modifyTime":71,"encrypt":12,"showComments":13,"customSlug":14},"树莓派监控摄像头制作",1673,[67,68,8],"树莓派","python",1010,1669896775319,1679559691141,1793351209005]