-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy path使用-VSCode-调试-Koa-或者-Express.html
1 lines (1 loc) · 32.2 KB
/
使用-VSCode-调试-Koa-或者-Express.html
1
<!doctype html><html class="theme-next mist"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="google-site-verification" content="PBwskePkFkRAnqisXEBN7FyYihV0DkOHyvEC2eDt6Gg"><meta name="referrer" content="never"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="baidu-site-verification" content="haLEFmuOYV"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"0f81ff2f"}),daovoice("update")</script><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css"><meta name="keywords" content="nodejs"><link rel="alternate" href="/atom.xml" title="Moorez" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.0.2"><meta name="description" content="前言平常调试 node 打 log 打习惯了，突然发现一个问题就是打印对象的时候，尤其这个对象里面有很多属性的时候，在终端上得一直往上拉才能看到，因此打算使用 vscode 来打断点调试程序。"><meta name="keywords" content="nodejs"><meta property="og:type" content="article"><meta property="og:title" content="使用 VSCode 调试 Koa 或者 Express 项目"><meta property="og:url" content="http://www.shenzekun.cn/使用-VSCode-调试-Koa-或者-Express.html"><meta property="og:site_name" content="Moorez"><meta property="og:description" content="前言平常调试 node 打 log 打习惯了，突然发现一个问题就是打印对象的时候，尤其这个对象里面有很多属性的时候，在终端上得一直往上拉才能看到，因此打算使用 vscode 来打断点调试程序。"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-a67136d084037f23.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-7e3ddc3492ebe230.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-95e9b238f28d55cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-f0ce310223b32c2f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-d6512d9a5ec0de37.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-2af99b27635d0d62.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:updated_time" content="2019-05-08T09:42:31.889Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="使用 VSCode 调试 Koa 或者 Express 项目"><meta name="twitter:description" content="前言平常调试 node 打 log 打习惯了，突然发现一个问题就是打印对象的时候，尤其这个对象里面有很多属性的时候，在终端上得一直往上拉才能看到，因此打算使用 vscode 来打断点调试程序。"><meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/5308475-a67136d084037f23.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Mist",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!1,duoshuo:{userId:"0",author:"Author"}}</script><link rel="canonical" href="http://www.shenzekun.cn/使用-VSCode-调试-Koa-或者-Express.html"><title>使用 VSCode 调试 Koa 或者 Express 项目 | Moorez</title></head><body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/shenzekun" class="github-corner" aria-label="View source on Github"><svg width="92" height="92" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="//schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Moorez</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div><span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://www.shenzekun.cn/使用-VSCode-调试-Koa-或者-Express.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="shenzekun"><meta itemprop="description" content=""><meta itemprop="image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Moorez"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">使用 VSCode 调试 Koa 或者 Express 项目</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2018-12-31T20:22:59+08:00" content="2018-12-31">2018-12-31</time></span> <span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span></span> <span id="/使用-VSCode-调试-Koa-或者-Express.html" class="leancloud_visitors" data-flag-title="使用 VSCode 调试 Koa 或者 Express 项目"> | <span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">热度</span><span class="leancloud-visitors-count"></span> <span>℃</span></span><div class="post-wordcount"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> <span class="post-meta-item-text">字数统计</span> <span title="字数统计">899 字</span> <span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span> <span class="post-meta-item-text">阅读时长</span> <span title="阅读时长">4 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><hr><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><blockquote><p>平常调试 node 打 log 打习惯了，突然发现一个问题就是打印对象的时候，尤其这个对象里面有很多属性的时候，在终端上得一直往上拉才能看到，因此打算使用 vscode 来打断点调试程序。</p></blockquote><a id="more"></a><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><blockquote><p>这里的例子是使用 koa ，express 类似。我是使用阿里巴巴的<a href="https://alibaba.github.io/ice/" target="_blank" rel="external">飞冰</a>快速搭建一个后台和前台的项目。</p></blockquote><ol><li>下载飞冰</li><li>打开飞冰，使用ICE Design Pro模板并点击 添加koa2，如下<br><img src="http://upload-images.jianshu.io/upload_images/5308475-a67136d084037f23.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image"></li><li>自动安装完成后，使用 vscode 打开项目：<br><img src="http://upload-images.jianshu.io/upload_images/5308475-7e3ddc3492ebe230.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image"></li><li>打开终端，运行<code>npm run client</code> 这个时候前端项目就运行起来了。</li><li>稍微修改一下前端的代码，因为这个模板默认是使用前端直接返回数据，而不去请求接口，打开<code>client/pages/UserLogin/actions.js</code>,将 <code>import {login} from '../../api/user';</code>改为 <code>import {login} from '../../api/index';</code>就可以了。最后打开页面，地址终端里面有说明。</li></ol><h3 id="编写launch-json"><a href="#编写launch-json" class="headerlink" title="编写launch.json"></a>编写launch.json</h3><blockquote><p>VsCode左侧第四个按钮是调试按钮，默认是『没有配置』。点击右侧的齿轮状图标，选择Node.js 会在项目根目录下创建 .vscode 的文件夹及 launch.json 文件。launch.json 内容如下：</p></blockquote><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> // 使用 IntelliSense 了解相关属性。 </div><div class="line"> // 悬停以查看现有属性的描述。</div><div class="line"> // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387</div><div class="line"> "version": "0.2.0",</div><div class="line"> "configurations": [</div><div class="line"> {</div><div class="line"> "type": "node",</div><div class="line"> "request": "launch",</div><div class="line"> "name": "启动程序",</div><div class="line"> "program": "${workspaceFolder}/server/index.js"</div><div class="line"> }</div><div class="line"> ]</div><div class="line">}</div></pre></td></tr></table></figure><p>默认会访问server下的 index.js 文件，但是这个项目的入口文件是 app.js，因此需要将<code>index.js</code>改为<code>app.js</code>。</p><p><strong>在launch.json中会使用到一些预定变量，这里说明一下：</strong></p><ul><li><code>${workspaceRoot}</code>：VSCode中打开文件夹的路径</li><li><code>${workspaceRootFolderName}</code>：VSCode中打开文件夹的路径, 但不包含”/“</li><li><code>${file}</code>：当前打开的文件</li><li><code>${fileBasename}</code>： 当前打开文件的文件名, 不含扩展名</li><li><code>${fileDirname}</code>： 当前打开文件的目录名</li><li><code>${fileExtname}</code> 当前打开文件的扩展名</li><li><code>${cwd}</code>：当前执行目录</li></ul><p>当我们在单步调试程序的时候，会进入node_modules里面，通常情况下我们并不需要去关心里面的逻辑实现，只关心项目本身的代码。在这个时候，我们就需要使用skipFiles：</p><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> // 使用 IntelliSense 了解相关属性。</div><div class="line"> // 悬停以查看现有属性的描述。</div><div class="line"> // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387</div><div class="line"> "version": "0.2.0",</div><div class="line"> "configurations": [{</div><div class="line"> "type": "node",</div><div class="line"> "request": "launch",</div><div class="line"> "name": "启动程序",</div><div class="line"> "program": "${workspaceFolder}/server/app.js",</div><div class="line"> "skipFiles": [</div><div class="line"> "${workspaceRoot}/node_modules/**/*.js",</div><div class="line"> "<node_internals>/**/*.js"</div><div class="line"> ]</div><div class="line"> }]</div><div class="line">}</div></pre></td></tr></table></figure><p>我们还想要自动重启的功能，安装 <code>nodemon</code> 或者 <code>node-dev</code>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">// 任选其一</div><div class="line">npm i nodemon -g</div><div class="line">npm i node-dev -g</div></pre></td></tr></table></figure><p>修改lanuch.json：</p><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> // 使用 IntelliSense 了解相关属性。</div><div class="line"> // 悬停以查看现有属性的描述。</div><div class="line"> // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387</div><div class="line"> "version": "0.2.0",</div><div class="line"> "configurations": [{</div><div class="line"> "type": "node",</div><div class="line"> "request": "launch",</div><div class="line"> "name": "启动程序",</div><div class="line"> "program": "${workspaceFolder}/server/app.js",</div><div class="line"> "runtimeExecutable": "nodemon", // 或者 node-dev</div><div class="line"> "restart": true,</div><div class="line"> "console": "integratedTerminal",</div><div class="line"> "skipFiles": [</div><div class="line"> "${workspaceRoot}/node_modules/**/*.js",</div><div class="line"> "<node_internals>/**/*.js"</div><div class="line"> ]</div><div class="line"> }]</div><div class="line">}</div></pre></td></tr></table></figure><p>这里新增了三个字段，分别是：</p><ul><li>runtimeExecutable：用什么命令执行 app.js，这里设置为 nodemon，默认是 node</li><li>restart：在终止 Node.js 后重启会话</li><li>console：启动调试目标的位置，这里选择在 vscode 的集成终端输出信息</li></ul><h3 id="调试"><a href="#调试" class="headerlink" title="调试"></a>调试</h3><p>这里在 <code>server/controller/user.js</code> 的 login 打了个断点：<br><img src="http://upload-images.jianshu.io/upload_images/5308475-95e9b238f28d55cd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image">启动调试，如下：<br><img src="http://upload-images.jianshu.io/upload_images/5308475-f0ce310223b32c2f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image"><br>vscode 集成终端打印如下：<br><img src="http://upload-images.jianshu.io/upload_images/5308475-d6512d9a5ec0de37.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image"><br>在前端页面点击登录，会跳到这里：<br><img src="http://upload-images.jianshu.io/upload_images/5308475-2af99b27635d0d62.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image"><br>我们就能看到变量的信息啦😄（<strong>注意</strong>：如果此时终止了调试，nodemon 还是会运行，得在集成终端终止）</p></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></div></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/使用-VSCode-调试-Koa-或者-Express.html">使用 VSCode 调试 Koa 或者 Express 项目</a></p><p><span>文章作者:</span><a href="/" title="访问 shenzekun 的个人博客">shenzekun</a></p><p><span>发布时间:</span>2018年12月31日 - 20:22</p><p><span>最后更新:</span>2019年05月08日 - 17:42</p><p><span>原始链接:</span><a href="/使用-VSCode-调试-Koa-或者-Express.html" title="使用 VSCode 调试 Koa 或者 Express 项目">http://www.shenzekun.cn/使用-VSCode-调试-Koa-或者-Express.html</a><span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://www.shenzekun.cn/使用-VSCode-调试-Koa-或者-Express.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>您的支持将鼓励我继续创作！</div><button id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'><span>赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/image/wechat-reward-image.png" alt="shenzekun WeChat Pay"><p>微信打赏</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/node/" rel="tag"><i class="fa fa-tag"></i>node</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/nodejs-路径解析顺序.html" rel="next" title="nodejs 路径解析顺序"><i class="fa fa-chevron-left"></i> nodejs 路径解析顺序</a></div><div class="post-nav-prev post-nav-item"><a href="/Git-更新-commit-的内容和多个-commit-合并.html" rel="prev" title="Git 更新 commit 的内容和多个 commit 合并">Git 更新 commit 的内容和多个 commit 合并<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"></div></div></div><div class="comments" id="comments"><div id="lv-container" data-id="city" data-uid="MTAyMC8yODgyMi81Mzky"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview">站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person"><img class="site-author-image" itemprop="image" src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg" alt="shenzekun"><p class="site-author-name" itemprop="name">shenzekun</p><p class="site-description motion-element" itemprop="description">Road endless its long and far, I will seek up and down！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">39</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">6</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">19</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/shenzekun" target="_blank" rel="external nofollow" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://www.jianshu.com/u/b473784d730c" target="_blank" rel="external nofollow" title="简书"><i class="fa fa-fw fa-heartbeat"></i> 简书</a></span><span class="links-of-author-item"><a href="https://twitter.com/shenzekun" target="_blank" rel="external nofollow" title="Twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a></span><span class="links-of-author-item"><a href="https://segmentfault.com/u/juli_590dd17068b9e" target="_blank" rel="external nofollow" title="SegmentFault"><i class="fa fa-fw fa-meh-o"></i> SegmentFault</a></span><span class="links-of-author-item"><a href="http://blog.csdn.net/qq_33699981?viewmode=list" target="_blank" rel="external nofollow" title="csdn"><i class="fa fa-fw fa-crosshairs"></i> csdn</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/5866ed77ac502e00612f1949" target="_blank" rel="external nofollow" title="掘金"><i class="fa fa-fw fa-spinner"></i> 掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a></li><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a></li><li class="links-of-blogroll-item"><a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a></li><li class="links-of-blogroll-item"><a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a></li><li class="links-of-blogroll-item"><a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a></li></ul></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#安装"><span class="nav-number">2.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#编写launch-json"><span class="nav-number">3.</span> <span class="nav-text">编写launch.json</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#调试"><span class="nav-number">4.</span> <span class="nav-text">调试</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">shenzekun</span></div><div class="theme-info"><i class="fa fa-pencil"></i> <span class="post-count">博客全站共 40.7k 字</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script><script type="text/javascript">!function(e,t){var n,c=e.getElementsByTagName(t)[0];"function"!=typeof LivereTower&&((n=e.createElement(t)).src="https://cdn-city.livere.com/js/embed.dist.js",n.async=!0,c.parentNode.insertBefore(n,c))}(document,"script")</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),n=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!1,n=r.title.trim().toLowerCase(),s=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=decodeURIComponent(r.url),i=-1,l=-1,p=-1;if(""!=n&&a.forEach(function(e,t){i=n.indexOf(e),l=s.indexOf(e),(i>=0||l>=0)&&(c=!0,0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+n+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;u<0&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),n.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").click(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script><script>AV.initialize("Cc9hxvKgB63w6aMIIBCV2Bfz-gzGzoHsz","mBmolCuukl1GN11A7m8VQj9f")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){if(0!==e.length){for(c=0;c<e.length;c++){var t=e[c],i=t.get("url"),s=t.get("time"),l=document.getElementById(i);$(l).find(".leancloud-visitors-count").text(s)}for(var c=0;c<n.length;c++){var i=n[c],l=document.getElementById(i),r=$(l).find(".leancloud-visitors-count");""==r.text()&&r.text(0)}}else o.find(".leancloud-visitors-count").text(0)}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var s=new e,l=new AV.ACL;l.setPublicReadAccess(!0),l.setPublicWriteAccess(!0),s.setACL(l),s.set("title",o),s.set("url",n),s.set("time",1),s.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script></body></html>