content.json

{"pages":[{"title":"","text":"在那段时间的最后一天。一样的时间，再次坐上同一辆车，这一次，我不会再错过她了","link":"/about/index.html"}],"posts":[{"title":"Hello World","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","link":"/2018/12/07/hello-world/"},{"title":"debug 小记","text":"记录在 debug 道路上 execArgv 与 argvexecArgv 是执行参数，作用是给 node 去读的，比如 1234node --inspect index.js server# --inspect 是给 node 使用的# server 则是在应用里面解析 抓不到进程设置了 process.title，vscode debug 机制似乎可以捕捉到只有两种 title: code helper node 如果设置了 title，可以就抓不到了。比如 1process.title = 'hexo' 多线程调试虽然自带了有 autoAttachChildProcesses 这个属性，但是只对 cluster 有很好的支持 123const { fork } = require('child_process');fork('compute.js'); 这样会因为子进程启动了重复的 debug 端口而报错 123456Debugger listening on ws://127.0.0.1:3228/8ae7c5c1-440f-4f1e-ac41-da1f37588e36For help, see: https://nodejs.org/en/docs/inspectorDebugger attached.Starting inspector on 127.0.0.1:3228 failed: address already in useAssertion failed: (!uv__is_closing(handle)), function uv_close, file ../deps/uv/src/unix/core.c, line 117.Debugger attached. 解决方案给子进程设置单独的 debug 端口 123fork('compute.js', [], { execArgv: ['--inspect-brk=9111'] });// 如果是第三方库，需要去改一下源码，这个有点蛋疼 再通过端口附加去抓到就可以了。","link":"/2019/01/29/debug-小记/"},{"title":"Quokka","text":"Quokka.js 是 JavaScript 和 TypeScript 的快速原型操作平台。它会在您键入时立即运行代码，并在代码编辑器中显示各种执行结果 简单的来说，它就是可以让我们开发者们最小程度的进行快速小 demo 的工具 官方简介：Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor. https://quokkajs.com/ 快速开始下载插件在 vscode 中的插件管理中可以直接下载 Quokka.js 使用 在 vscode 编辑器中按 F1，输入 New JavaScript File 编写你的 JavaScript 代码 官方demo： 使用感受很适合输出小 demo默认使用当前的 node 环境，可以通过插件（jsdom-quokka-plugin）拓展到 window 对象不需要保存就可以看到任何一段代码的输出，真的不要太快，很类似速写笔记本。 直观比 debug 更加直观的体现每行代码 绿色方块：行尚未执行 灰色方块：执行通过 黄色方块：仅部分执行 红色方块：源行是错误的来源，或者是错误的堆栈 清晰和浏览器控制台一样的展开效果，对比与 node debug 要清晰 存在的问题代码会自动通过 babel 去编译，这个可能不是开发者们想要的，比如 123import fs from 'fs'console.log(fs) 这个不会报错，但是通过原生 node 下是无法直接执行的 社区版和 Pro 版未付费的情况下，只能使用的是社区版。功能有限，比如无法导入其他模块，Pro 强大一点，但是要花掉几十块大洋。 参考TDD（测试驱动开发）是否已死？","link":"/2019/01/21/quokka-js/"},{"title":"Node 全局包管理笔记","text":"npm：node 自带的包管理工具 yarn：由 facebook 开源的 node 包管理工具 全局包安装npm1$ npm install package-name -g nvm 下载的不同版本的 node 是相互独立 1234~/.nvm/versions/node » lsv10.4.1v4.6.1v8.11.4 上面的命令显示在电脑中下载的3个不同的 node 版本，里面存放着当前版本中下载的全局包以及 cli 命令 yarn1$ yarn global add package-name 不像 npm 里的 –global 标志，global 是一个必须跟在 yarn 后面的命令。 输入 yarn add global package-name 会把名为 global 和 package-name 的包添加到本地，而非全局添加 package-name。 查看1234# npm$ npm list -g --depth 0# yarn$ yarn global list 删除123456789101112131415# npm$ npm uninstall package-name -g## 如果使用其他比如 tnpm 下载的包，也要换成特定的脚本## 比如：tnpm uninstall package-name -g# yarn$ yarn global remove package-name$ yarn global remove @vue/cli@3.0.5## 不需要加版本号❎ yarn global remove @vue/cli@3.0.5✅ yarn global remove @vue/cli## 也会移除全局对应 文件目录查看脚本目录123456$ which $(cli-name)## 栗子$ which dva/Users/dyun/.nvm/versions/node/v10.4.1/bin/dva npm如果使用了nvm,比如 node 版本现在用的是10.4.1 cli 目录 ~/.nvm/versions/node/v10.4.1/bin/ 全局包 ~/.nvm/versions/node/v10.4.1/lib/node_modules/ yarn yarn global dir: 将打印包含全局node_modules的全局安装文件夹的输出。默认情况下为：〜/.config/yarn/global yarn bin: 显示 yarn bin 目录的位置。默认情况下为：~/.config/yarn/global/node_modules/.bin 区别 npm 下载的包是区分 node 版本的（nvm），yarn 下载的全局包是不区分的（在任何 node 版本下都可以使用） npm 下载只会提供当前包的 cli 命令。而通过 yarn 下载的则会提供包括依赖包的 cli nvm 切换版本解析切换命令12345# 这个命令只是简单的切换了 PATH 的脚本目录nvm use $(version)# PATH=/Users/dyun/.nvm/versions/node/$(version)/bin","link":"/2019/01/31/Node-全局包管理笔记/"},{"title":"跨域资源共享","text":"CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。 1Access-Control-Allow-Credentials: true","link":"/2019/01/19/跨域资源共享/"},{"title":"node 本地 debug 调试","text":"开发者一般在开发初期的时候（包括现在的我），不管是在 node，还是浏览器 js 中都习惯使用 console.log 来进行代码的调试。这样做的好处是灰常的简单，特别是在浏览器 js 开发中，因为可以树状展开的原因，包括很多资深的前端工程师，都很喜欢使用。 但是很多优秀的开发者手中，只需要 debug 一次，就能很高效的发现问题。效率比 console 高出许多 开始使用1$ node --inspect index.js 只需要加上一个 --inspect 的参数（Node版本要大于7），就可以启动了。成功后会打印出来： 12Debugger listening on ws://127.0.0.1:9229/787188b1-6d48-4756-9cef-0a7aa8d25b76For help, see: https://nodejs.org/en/docs/inspector 上面的命令会打开一个 WebSockets 的服务，指定了9229作为默认的端口配置查看： 1234567891011121314// http://localhost:9229/json/list[ { \"description\": \"node.js instance\", \"devtoolsFrontendUrl\": \"chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:9229/787188b1-6d48-4756-9cef-0a7aa8d25b76\", \"faviconUrl\": \"https://nodejs.org/static/favicon.ico\", \"id\": \"787188b1-6d48-4756-9cef-0a7aa8d25b76\", \"title\": \"index\", \"type\": \"node\", \"url\": \"file://\", \"webSocketDebuggerUrl\": \"ws://localhost:9229/787188b1-6d48-4756-9cef-0a7aa8d25b76\" }] 调试工具这里列出现在比较常用的几种： Chrome DevTools Visual Studio Code Chrome DevTools进入chrome://inspect/#devices，打开控制台会出现 Server running at http://127.0.0.1:8888/,表示已经开启成功了，也可以在控制台上输入 process，会看到 process 对象被打印出来了。 进入 source 面板。点击 add folder to workspace 添加你的项目到工作区，就可以进行源码调试了。 虽然 chrome 对 node 调试的支持十分友好，但是因为没办法在编辑器中打断点。这种方式还是不太常用 Visual Studio Code通过配置项目 .vscode/launch.json 来实现。 123456789101112131415161718192021{ \"version\": \"0.2.0\", \"configurations\": [ { \"type\": \"node\", \"request\": \"attach\", \"name\": \"Attach by Process ID\", \"processId\": \"${command:PickProcess}\" }, { \"type\": \"node\", \"request\": \"launch\", \"runtimeVersion\": \"4.6.1\", \"name\": \"启动程序\", \"program\": \"${workspaceFolder}/index.js\", \"args\": [ \"param\" ] } ]} request 区分两种启动方式 attach launch attach连接调试法，这种调试相对与 Node.js 应用独立。在取消 debug 的时候通常也不会影响到 Node.js 应用。 attach 调试通过不同的连接方式也区分两种 连接进程 必传 processId 字段，processId 是应用的进程 id，在代码中也可以通过 process.pid 查看 可以在 launch.json 中配置，也可以使用 Debug: Attach to Node Process 命令快速连接 因为 processId 是系统随机产生的，还是建议用上面的命令。 只能用作本地 debug 连接端口 需要 address 和 port （address 不能加上协议，不然会认为指定了端口号） port 不是应用的服务器端口，而是专门用来调试的端口，默认 9229 本地与远程 debug，都可以使用 本质上两种原理是一样的，只是在用法上有点不同，端口必开进程这个就不说了。连接进程的时候，其实也是在进程上开一个 debug 端口。 一些通用配置 type：调试的类型，前端开发用的比较多的是 node 和 chrome request：调试方式来，可选的有 attach 和 launch Attach配置 processId：附加的进程 ID Launch配置的 program：要调试的 Node.js 程序的绝对路径 args：命令行参数 runtimeExecutable：要使用的可执行文件，比如 npm、nodemon runtimeArgs：传递给运行时可执行文件的可选参数 runtimeVersion：如果使用了 nvm，则可以指定要运行的版本","link":"/2019/01/21/node-本地-debug-调试/"},{"title":"Hello World","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick Start Create a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455const puppeteer = require('puppeteer');const fs = require('fs');init();async function init() { // 创建浏览器，打开一个 page const browser = await puppeteer.launch(); const page = await browser.newPage(); // 访问 url await page.goto('http://localhost:3000/'); /** * 开启 CSS Coverage 功能 * @see https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.11.0&show=api-coveragestartcsscoverageoptions */ await page.coverage.startCSSCoverage(); // 录入用户交互 // await page.hover('.section'); // 停止收集并得到 cssCoverage // cssCoverage 是个数组，包含每个被引用的 css 文件 const cssCoverage = await page.coverage.stopCSSCoverage(); // 调查 CSS Coverage并提取使用过的 CSS let cssUsedBytes = 0; let cssTotalBytes = 0; let coveredCssString = ''; cssCoverage.forEach((item) => { const { ranges, text } = item; cssTotalBytes += text.length; // ranges 数组中标记了每一个使用过的 class ranges.forEach((range) => { cssUsedBytes += range.end - range.start; coveredCssString += `${text.slice(range.start, range.end)}\\n`; }); }); console.log(`总大小: ${cssTotalBytes}`); console.log(`使用到的大小: ${cssUsedBytes}`); fs.writeFile('./style.css', coveredCssString, (err) => { if (err) { return console.log(err); } console.log('样式文件导出成功 ✌️!'); }); await browser.close();} More info: Deployment","link":"/2018/12/07/test-01/"}],"tags":[{"name":"debug","slug":"debug","link":"/tags/debug/"},{"name":"node","slug":"node","link":"/tags/node/"},{"name":"vscode","slug":"vscode","link":"/tags/vscode/"},{"name":"单元测试","slug":"单元测试","link":"/tags/单元测试/"},{"name":"测试驱动开发","slug":"测试驱动开发","link":"/tags/测试驱动开发/"},{"name":"npm","slug":"npm","link":"/tags/npm/"},{"name":"yarn","slug":"yarn","link":"/tags/yarn/"},{"name":"ajax","slug":"ajax","link":"/tags/ajax/"},{"name":"browser","slug":"browser","link":"/tags/browser/"}],"categories":[{"name":"node","slug":"node","link":"/categories/node/"},{"name":"utils","slug":"utils","link":"/categories/utils/"},{"name":"npm","slug":"npm","link":"/categories/npm/"},{"name":"ajax","slug":"ajax","link":"/categories/ajax/"},{"name":"vscode","slug":"utils/vscode","link":"/categories/utils/vscode/"}]}