有人在代码里下毒，啊……
0%

发表于 更新于 Valine：

起源

软件部署的时候,我们需要打包发布到 开发环境 测试环境 生产环境。
但是我开发环境,测试环境用的是windows 。 集成测试环境, 生产环境用的linux。
由于环境的不同可能会导致意想不到的问题，明明在环境A测试通过，在环境B测试失败。于是又要加班定位，而这种系统级别的定位往往是最费时间和脑子的，而聪明的程序员就想到，我直接备份我的操作系统，然后你那边直接还原我的操作系统就好了。
备份操作系统文件太大，操作系统的硬件也可能不一样，那么怎么办？
虚拟机呗！！！
虚拟机还不够快，不够小，不够方便，docker应运而生!!

概念

docker最重要的两个概念,是容器,和镜像
其实根据我的docker起源说,聪明的小伙伴肯定能类比到上述的虚拟机和虚拟机用到的镜像文件,对的,咱就这么理解就好了
容器==虚拟机 镜像==虚拟机启动用到的镜像
要想我们发布的软件跑起来,怎么做?
运行一个容器,容器里面装个镜像就可以了!!! so easy

Git神模仿

做过开发的应该都用过git去管理源代码,docker将git的思想用在镜像上。
假如有个容器运行着linux的基础镜像,你在此容器中上安装了nodejs,然后我们就可以commit一下这个容器,容器的状态就会被保存成生成一个新的镜像了.
很多docker命令都能做到类似git commit 的这种命令,然后返回一个hash值来标识新的镜像,我们就可以根据这些hash标记,在容器内时光倒流,docker也支持git打标签的方式给容器或者镜像取个别名,方便查找,hash谁记得住
#下一篇文章 就是hello world环节了

发表于 更新于 Valine：

承接上一篇的 win7 docker环境安装
docker info 查看当前虚拟机的docker信息
image.png

docker help 查看命令的帮助文档
image.png
image.png
image.png
image.png
一共40来个命令,每个命令后面有解释,一看就明白干嘛的

第一类命令 镜像相关的命令跟git 命令可以类比着记忆

  • build==init 初始化镜像
  • commit==commit 提交镜像
  • diff 比较文件系统
  • tag 给镜像打标签
  • history 查看镜像历史
  • save 将镜像保存成 tar包
  • load 从tar中读取镜像
  • rmi 删除镜像

第二类命令 容器相关的命令,每个容器可以理解成系统中的一个运行的进程

  • create ,rm 创建容器
  • attach 给容器附加个什么东西
  • exec 在容器里执行什么东西
  • restart 重启容器
  • export 导出容器成tar压缩包
  • pause ,unpause 取消暂停
  • run,kill 启动容器
  • stop,start 杀容器,停止运行,并不会删除,容器有三种状态,运行的,暂停的,停止的,看这状态是不是更像虚拟机了
  • rename 重命名
  • ps ,port,logs,top,stats 容器列表,容器的接口映射关系,容器的日志,容器内的进程,容器资源使用情况,这几个都是看容器状态的
  • update 更新容器的配置

    第三类命令 dockerHub相关的

  • login ,logout 登录,登出
  • pull,push dockerHub 拉取 推送 镜像

stop与kill的区别

stop 会等10秒后再kill容器,并会告知容器内的程序
详情请参考 https://blog.csdn.net/weixin_34414196/article/details/86428138

run 跟 start的区别

run =create + start
所以咱们第一次用run 后面用start就好了

当我们具体用哪个命令的时候,docker COMMAND --help 查看某个命令的帮助文档
image.png
[OPTIONS] 上图中的这种参数就是可有可无,大写代表变量,不要直接抄哦
NAME|ID 容器的名称或者ID 必选
[NAME|ID…] 表示可以填多个

发表于 更新于 Valine：
  1. 本人win7,先下载DockerToolBox,win10的可以下载docker desktop for windows
    下载地址 https://docs.docker.com/toolbox/overview/
    双击运行 一路下一步就好了
    image.png
  2. 然后报错,手按太快,询问是否安装虚拟机的时候直接点了回车,不安装,这里要注意下
    image.png
  3. 正常安装后桌面应该出现这三个小图标,第一个是docker的命令行工具,第二个是联网查看dockerhub的镜像,第三个是虚拟机
    image.png
  4. 把提前下载好的 docker2boot镜像丢到缓存里面,否则启动的时候找不到会自动下载比较慢
    image.png
  5. 我们运行第一个Docker Quickstart Terminal ,出现下面的界面就ok了
    image.png

发表于 更新于 Valine：

使用git提交到github,每次都要输入用户名和密码的解决方法

https://www.cnblogs.com/sky6862/p/7992736.html

使用ssh协议提交github代码

https://blog.csdn.net/u013778905/article/details/83501204

git 记住密码

git config --global credential.helper store

git 密码错误

控制面板\用户帐户和家庭安全\凭据管理器 把网站的凭证删除掉

git pull 冲突

如果不想解决的话,可以直接 git reset --hard HEAD

一次提交需要提交到多个分支的时候,使用摘取命令

git cherry-pick <commitID>

git 从本地clone

git clone 除了从远程地址clone，还能从本地clone。
有时候方便开发我们需要不同的分支在不同的文件夹下同步开发，避免频繁的编译重构。
直接复制文件夹，里面的node_modules target 等被gitignore的文件会非常慢.
image.png

发表于 更新于 Valine：

项目地址

https://gitee.com/alasq/tools.git

请原谅我把gitee当网盘用☺️

开发用的小工具

介绍

前端开发用的小工具

工具列表(该仓库有安装包的工具)

  • Hotkey Commander 检测快捷键冲突
  • 小书匠 写作工具,可直接同步到多个平台
  • licecap 录屏
  • ScreenToGif 录Gif还能编辑 gif
  • fscupture 截屏,测距,取色,录屏(视频),滚动录屏
  • Snipaste 截屏,粘贴到桌面
  • everything 文件系统快速搜索
  • Q-dir 分屏资源管理器

开发环境

  • chrome & firefox & ie & edge & 360浏览器
  • Git & Git tortoise 版本管理工具
  • Node 跑Node代码用
  • nvm node版本管理工具
  • Oracle JDK / Open JDK 跑java代码用的
  • Postman 接口测试工具
  • XAMPP（Apache+MySQL+PHP+PERL）跑PHP用,还白送一个comcat 一个mysql数据库
  • Beyond Compare 比较文件夹很好用
  • WinSCP sftp工具
  • xShell / mabaxterm ssh远程连接工具
  • docker windows上不建议装,能用的镜像太少

Chrome 插件

  • RSS 订阅
  • 划词翻译
  • Vue DevTools

IDE

  • Vscode/WebStorm
  • HBuilder
  • 微信开发者工具
  • nodePad++

直播三件套

  • OBS Studio 录屏
  • Arctime Pro 字幕工具
  • Adobe Pr 视频编辑(会声会影/拍大师/剪映/爱剪辑)

办公软件

  • word & ppt & excel
  • pdf
  • email/foxmail

发表于 更新于 Valine：

快速监控JavaScript中的事件

monitor-events.gif
您可以使用命令行API方法monitorEvents（object [，events]）记录分发给对象的所有事件。然后将事件对象记录到控制台。当您需要提醒事件对象的可用属性时很有用。

一个例子

例如，直接在控制台面板中尝试以下代码：

monitorEvents(window, ‘click’)

当您在网页中单击时，现在应该看到click事件自动记录到控制台。

控制台获取当前选定的DOM节点的快捷方式

dollar-zero.gif

在“Element”面板中选择节点后，请在控制台面板中使用表达式$0进行访问。您还可以使用$_访问最近求值的表达式的值

控制台快速定位DOM位置

reveal-in-elements.gif

发表于 更新于 Valine：

is-running.gif

介绍

您可以使用“is:running高级网络过滤器”查看未完成的网络请求（例如正在运行的请求）。其他一些过滤器，您可以尝试是：status-code，method，domain和更多！

如何使用它

在“网络面板”过滤器框中，键入is:running并重新加载页面。观察可见的“网络面板”行如何快速变化以仅显示当前正在运行的资源。

别的过滤器

network-advanced-filter.gif

补充

还有这些过滤器可以使用

  • domain
  • has-response-header
  • is - []（例如上图的例子）
  • larger-than
  • method
  • mime-type
  • mixed-content
  • priority
  • scheme
  • set-cookie-domain
  • set-cookie-name
  • set-cookie-value
  • resource-type
  • cookie-domain
  • cookie-name
  • cookie-path
  • cookie-value
  • status-code
  • url

    查看网络资源依赖关系

    network-dependency.gif
    点击到具体的请求，查看 initiator 面板也是可以看到的 请求的调用栈与树状依赖结构

发表于 更新于 Valine：

1. Alt + Click展开所有的子节点

alt-click-expand-node.gif

2. 轻松修改tagName

quick-edit-element.gif

3. 查看元素的事件侦听器

view-event-listeners.gif

介绍

DevTools可以向您显示在元素上注册的JavaScript事件侦听器。例如，向click注册的处理程序.addEventListener()。

DevTools还可将您带到注册该事件的确切代码行，这在从中进行外部调试时非常有用。

###如何使用此功能
在“Element”面板中检查元素
导航到“Element”面板中的“Event Listener”窗格
浏览在任何节点上注册的事件。您可以通过在上下文菜单中选择“显示函数定义”来查看事件侦听器的源。

补充

有时候事件显示特别多，可以去掉 Ancestors复选框，只显示绑定在元素自身的事件，而非被代理的事件

思考

事件的冒泡与代理，事件的队列

发表于 更新于 Valine：

highlight-paused-statement.gif
调试器暂停后，您现在可以看到正在执行的代码的确切部分。它以高亮显示较深的蓝色阴影。这在调试精简代码时很有用。

debugger-shortcuts.gif

Toggle a breakpoint while on a line: Cmd + B （切换当前行的断点）
Select the next call frame: Ctrl + . (下一个调用栈)
Select the previous call frame: Ctrl + , (上一个调用栈)

补充

动图上点击的按钮是当遇到报错的时候，自动触发断点调试。
我们可以在源代码中添加 debugger 设置断点
可以在source面板中文件的行号前面单击设置断点 Cmd + B

通过DOM被修改，被移除命中断点

image.png

通过触发网络请求命中断点

image.png

断点触发后，按住Ctrl 能跳转到的地方会被高亮

js-jump-to-destination.gif