无题
常用的 Docker Compose 配置项与 Dockerfile 一样，编写 Docker Compose 的配置文件是掌握和使用好 Docker Compose 的前提。编写 Docker Compose 配置文件，其本质就是根据我们所设计的应用架构，对不同应用容器进行配置并加以组合。在这一节中，我们就来谈谈如何编写 Docker Compose 的配置文件，了解其中常见配置项的使用方法。
定义服务为了理解在开发中常用的 Docker Compose 配置，我们通过一个在开发中使用的 Docker Compose 文件来进行下面的讲解。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758version: "3"services: redis: image: redis:3.2 networks: - backend volumes: - ./redis/red ...
无题
应用于服务化开发上一节里我们谈到了小型的独立项目如何使用 Docker Compose 来搭建程序的运行环境，对于由多人或多部门参与的中大型服务化架构的项目，仅由一个 Docker Compose 项目来管理它们的运行环境显然是不切实际的。在这一小节里，我们就谈谈如何在服务化开发中合理利用 Docker 来搭建环境。
服务开发环境在开始之前，我们依然来设定一个场景。在这里，假定我们处于一个 Dubbo 治下的微服务系统，而工作是开发系统中某一项微服务。
微服务开发与上一节里我们提到的小型项目开发在环境搭建上有一定的区别，我们要合理地调整 Docker 的使用方法和策略，就必须先了解这些区别。
在微服务开发中，我们所开发的功能都不是完整的系统，很多功能需要与其他服务之间配合才能正常运转，而我们开发所使用的机器时常无法满足我们在一台机器上将这些相关服务同时运行起来。
我们仅仅是开发某一部分服务的内容，既对其他服务的运转机制不太了解，又完全没有必要在自己的机器上运行其他的服务。所以我们最佳的实践自然就是让参与系统中服务开发的同事，各自维护自己开发服务的环境，而直接提供给我们对应的连接地址使用 ...
无题
编写 Docker Compose 项目通过阅读之前的小节，相信大家对 Docker 在开发中的应用已经有了一定的了解。作为一款实用的软件，我们必须回归到实践中来，这样才能更好地理解 Docker 的实用逻辑和背后的原理。在这一小节里，我们就举一个完整的例子，让大家跟随这个项目的脉络，熟悉如何通过 Docker 和 Docker Compose 来搭建应用开发环境。
设计项目的目录结构在这一小节里，我们以一个由 MySQL、Redis、PHP-FPM 和 Nginx 组成的小型 PHP 网站为例，介绍通过 Docker 搭建运行这套程序运行环境的方法。
既然我们说到这个小型网站是由 MySQL、Redis、PHP-FPM 和 Nginx 四款软件所组成的，那么自然在 Docker 里，我们要准备四个容器分别来运行它们。而为了更好地管理这四个容器所组成的环境，我们这里还会使用到 Docker Compose。
与搭建一个软件开发项目类似，我们提倡将 Docker Compose 项目的组成内容聚集到一个文件目录中，这样更利于我们进行管理和迁移。
这里我已经建立好了一个目录结构，虽然我们在 ...
无题
代码运行的时候，我们想看到它的运行细节，这就需要调试。
我们平时会用各种调试工具： Chrome DevTools、VSCode Debugger、Vue/React DevTools 等。
这些调试工具都有 4 要素：frontend、backend、调试协议、信道。
同一个 backend 可以对接不同的 frontend，所以我们可以用 Chrome DevTools 或者 VSCode Debugger 来调试 Node.js 或者网页代码。它们只是不同的 frontend。
我们学习了用 VSCode Debugger 来调试网页，包括 Vue、React 项目，还有 Vue、React 源码。
还学习了用 VSCode Debugger 调试 Node.js 代码和 npm scripts，我们调试了 babel 源码、nest.js 项目和源码、typescript 源码、eslint 源码、patch-package 源码等。
因为代码一般会经过编译再运行，而我们想直接调试源码，这时候就需要 sourcemap 了。
我们学习了 sourcemap 的结构和如 ...
无题
异步代码的执行顺序是前端面试必问的面试题，它主要考察对 Event Loop、宏微任务以及它们执行顺序的理解。
这类问题新手比较容易困惑，老手一不注意也容易掉坑里。
那理清这类问题，有没有什么好的办法呢？
还真有，就是通过 Performance 工具。
Performance 是 Chrome DevTools 内置的用来分析代码执行耗时的工具，它会记录每个函数、每个宏微任务的耗时，并且会把超过 50ms 的长任务标红，这样开发者就可以针对性的优化。
比如这就是一个长任务：
优化 js 运行性能的目标就是消除它。
但是今天我们不是用它来分析代码性能，而是用它来看宏微任务的执行情况。
我们准备这样一段代码：
12345678910111213141516171819202122<!DOCTYPE html><html lang="en"> <body> <script> Promise.resolve().then(() => { console.log('p ...
无题
为容器配置网络在互联网时代，网络已经成为绝大多数应用进行数据交换的主要通道，Docker 作为集群部署的利器，在网络支持上也下了许多功夫。功能丰富和强大，并不代表使用复杂，在 Docker 的封装下，我们依然可以通过命令和参数轻松的为容器制定不同的网络方案。在这一节中，我们就来了解 Docker 的网络部分。
容器网络在之前介绍 Docker 核心组成的时候，我们已经简单谈到了容器网络的相关知识。容器网络实质上也是由 Docker 为应用程序所创造的虚拟环境的一部分，它能让应用从宿主机操作系统的网络环境中独立出来，形成容器自有的网络设备、IP 协议栈、端口套接字、IP 路由表、防火墙等等与网络相关的模块。
还是回归上面这幅之前展示过的关于 Docker 网络的图片。在 Docker 网络中，有三个比较核心的概念，也就是：**沙盒 ( Sandbox )、网络 ( Network )、端点 ( Endpoint )**。
沙盒提供了容器的虚拟网络栈，也就是之前所提到的端口套接字、IP 路由表、防火墙等的内容。其实现隔离了容器网络与宿主机网络，形成了完全独立的容器网络环境。
网络可以理 ...
无题
从镜像仓库获得镜像之前我们说到了，Docker 与其他虚拟化软件的一处不同就是将镜像管理纳入到了功能之中。实现虚拟化只是程序能够无缝移植的一部分，而有了镜像管理，就真正取代了我们在移植过程中的繁琐操作。利用 Docker 的镜像管理功能，我们可以很方便的通过网络传输和分享镜像，并保障镜像内容的一致性。所以，了解 Docker 的镜像管理方法可以算是掌握 Docker 的第一步。
镜像仓库在之前的小节里，我们已经提到过 Docker 里集中存放镜像的一个概念，也就是镜像仓库。
如果说我们把镜像的结构用 Git 项目的结构做类比，那么镜像仓库就可以看似 GitLab、GitHub 等的托管平台，只不过 Docker 的镜像仓库托管的不是代码项目，而是镜像。
当然，存储镜像并不是镜像仓库最值得炫耀的功能，其最大的作用是实现了 Docker 镜像的分发。借助镜像仓库，我们得到了一个镜像的中转站，我们可以将开发环境上所使用的镜像推送至镜像仓库，并在测试或生产环境上拉取到它们，而这个过程仅需要几个命令，甚至自动化完成。
获取镜像虽然有很多种方式将镜像引入到 Docker 之中，但我们最为常用的获 ...
无题
很多同学不知道为什么要用 debugger 来调试，console.log 不行么？
还有，会用 debugger 了，还是有很多代码看不懂，如何调试复杂源码呢？
这篇文章就来讲一下为什么要用这些调试工具：
console.log vs Debugger相信绝大多数同学使用 console.log 调试的，把想看的变量值打印在控制台。
这样能满足需求，但是遇到对象的打印就不行了。
比如我想看 webpack 源码里的 compilation 对象的值，我打印了一下：
但你会发现对象的值也是对象的时候不会展开，而是打印一个 [Object] [Array] 这种字符串。
更致命的是打印的太长会超过缓冲区的大小，terminal 里会显示不全：
而你用 debugger 来跑，在这里打个断点来看就没这些问题了：
有的同学可能会说，那打印一个简单的值的时候用 console.log 还是很方便呀。
比如这样：
真的么？
那还不如用 logpoint：
代码执行到这里就会打印：
而且没有污染代码，用 console.log 的话调试完之后这个 console 不也得删掉么？
但是 ...
无题
作为前端开发，我们每天都会用 Chrome DevTools 调试 Chrome 的网页，但其实它还可以远程调试安卓手机的网页。
那 Chrome DevTools 如何远程调试安卓网页呢？它的实现原理是什么？
今天我们就来了解一下：
远程调试安卓网页用数据线把安卓手机和电脑连接起来，在手机设置里打开 USB 调试：
然后在 chrome 打开 chrome://inspect 页面，勾选 Discover USB devices（默认是勾选的）：
这时候下面就会出现一个提示：请在设备上接受 debugging 会话
在手机上点击确定，就会建立调试会话：
下面就会列出所有可以调试的网页：
浏览器里的网页，或者 APP 调试包的 webview 的网页都会列出来。
点击 inspect 就可以调试了：
可以审查元素：
可以打断点：
也可以用 Performance 分析性能：
各种调试 PC 网页的功能基本都支持。这样就可以愉快的调试安卓的移动端网页了。
不过这个过程你可能会遇到这样的问题，打开的窗口是空白的或者是 404:
这是因为调试的目标可能 ...
无题
上节学会了用 Chrome 远程调试 Android 网页，这节来调试下 iOS 网页。
ios 网页调试只能用 safari 浏览器。
打开偏好设置 > 高级，勾选显示“开发”菜单：
之后就会出现“开发”菜单，下面会展示所有连接的设备：
它会提示你在 iPhone 上启用网页检查器。
这个是在 设置 > safari 浏览器 > 高级里开启的：
网页检查器下面也有这么一行提示：
之后在 Safari 浏览器里打开一个页面，比如 baidu.com：
在电脑的 Safari 浏览器的开发菜单里就会显示出这个网页：
不只是 Safari 浏览器，一些 APP 里内嵌的网页开启了调试的话也可以连接。
之后就可以在电脑上远程调试 iphone 上的网页了：
可以调试网络请求：
可以断点调试：
比如可以在所有未捕获的异常处断住，这是异常断点。
可以在请求某个 URL 的时候断住，这是 URL 断点：
可以添加事件断点：
还可以在 requestAnimationFrame、setInterval 的回调处断住。
而且在 Chrome DevTool ...