跟chatGPT一起复习前端 —— 前端工具

糖醋鲤鱼
175 阅读20分钟

前言

又到一波面试准备的时刻，整理了一波前端相关要点内容，配合chatGPT完成要点内容的整理输出，有纠正错误和需要补充的小伙伴可以在这里留言，及时更新。

调试工具

Chrome的开发者工具

Chrome 的开发者工具是一组内置于 Google Chrome 浏览器中的 Web 开发和调试工具。它们可以帮助你在浏览器中进行调试、分析和优化网站性能。以下是一些常用的技巧：

  1. 检查元素：右键单击页面上的任何元素，然后选择“检查”即可打开开发者工具并定位到该元素。
  2. 查看网络请求：在“网络”选项卡中查看所有网络请求，包括请求的 URL、响应代码、大小和时间。
  3. 查看控制台：在“控制台”选项卡中查看 JavaScript 错误、日志和调试信息。
  4. 编辑样式：在“元素”选项卡中编辑 CSS 样式并实时预览更改。
  5. 模拟设备：在“设备模式”选项卡中模拟不同的设备和屏幕大小，以测试响应式设计。
  6. 远程调试：使用 Chrome 远程调试功能，可以在其他设备上调试运行中的 Chrome 实例。

在 Chrome 中查看网站性能有以下步骤：

  1. 打开开发者工具：在 Chrome 浏览器中，按 F12 或 Ctrl+Shift+I（Windows 和 Linux）或 Cmd+Option+I（macOS）打开开发者工具。
  2. 切换到“性能”选项卡：在开发者工具中，单击“性能”选项卡。
  3. 开始记录性能数据：单击“记录”按钮开始记录性能数据。
  4. 停止记录性能数据：单击“停止”按钮停止记录性能数据。
  5. 查看性能数据：在“性能”选项卡中查看网站的加载时间、CPU 使用率、内存使用情况等信息。

在 Chrome 中禁用缓存有以下几种方法：

使用快捷键：在 Chrome 浏览器中，按 Shift+F5 或 Ctrl+Shift+R（Windows 和 Linux）或 Cmd+Shift+R（macOS）强制刷新网页并禁用缓存。 使用开发者工具：在 Chrome 浏览器中，按 F12 或 Ctrl+Shift+I（Windows 和 Linux）或 Cmd+Option+I（macOS）打开开发者工具。在开发者工具中，单击“Network”选项卡。勾选“Disable cache”复选框以禁用缓存。 使用隐身模式：在 Chrome 浏览器中，按 Ctrl+Shift+N 打开隐身模式窗口。在隐身模式窗口中打开网页，Chrome 会自动禁用缓存。

Safari的开发者工具

Safari 的开发者工具有以下功能：

  1. 网页调试：可以检查 HTML、CSS 和 JavaScript，以及网络请求和响应。
  2. 响应式设计模式：可以模拟不同的设备和屏幕大小，以便测试网站的响应性。
  3. JavaScript 调试：可以在脚本中设置断点，以便逐行调试代码。
  4. 网络分析：可以查看网站的网络性能和资源使用情况。
  5. 元素检查器：可以查看网页元素的 CSS 样式和布局信息。
  6. 资源管理器：可以查看网站使用的所有资源，如图片、样式表和脚本文件。

你可以使用 Safari 开发者工具中的网络分析功能来查看网站性能。在 Safari 开发者工具中，选择“网络”选项卡，然后刷新网页。你将看到每个请求的详细信息，包括请求时间、响应时间、文件大小和类型等。你还可以使用“时间轴”选项卡来查看网站的整体性能。

Charles

Charles 的主要功能包括：

  • 截取 Http 和 Https 网络封包。
  • 支持重发网络请求，方便后端调试。
  • 支持修改网络请求参数。
  • 支持网络请求的截获并动态修改。
  • 支持模拟慢速网络。
  • Structure 视图将网络请求按访问的域名分类。
  • Sequence 视图将网络请求按访问的时间排序。
  • Map 功能：分 Map Remote 和 Map Local 两种，Map Remote 是将指定的网络请求重定向到另一个网址请求地址，Map Local 是将指定的网络请求重定向到本地文件。
  • SSL 功能：可以在 Charles 中查看 HTTPS 请求和响应的内容。
  • Breakpoints 功能：可以暂停网络请求，以便于调试。
  • Throttling 功能：可以模拟不同的网络环境，比如 EDGE、3G、4G、WiFi 等等。
  • Repeat 功能：可以重复发送网络请求，以便于测试接口的性能。

Charles中可设置代理服务器

  1. 启动 Charles 后，第一次 Charles 会请求你给它设置系统代理的权限。
  2. 输入登录密码授予 Charles 该权限。
  3. 在菜单栏中选择 Proxy -> Proxy Settings，打开代理设置窗口。
  4. 在代理设置窗口中，选择 HTTP 选项卡，勾选 Enable HTTP Proxy 和 Enable SSL Proxy 两个选项。
  5. 在 Port 输入框中输入端口号，比如 8888。
  6. 点击 OK 按钮保存设置。

性能优化工具有哪些

以下是一些常用的性能优化工具：

  1. WebPageTest：一个免费的在线性能测试工具，可以帮助你评估网站的性能，包括加载时间、响应时间、页面大小等等。
  2. PageSpeed Insights：一个由 Google 提供的免费在线性能测试工具，可以帮助你评估网站的性能，并提供优化建议。
  3. YSlow：一个由 Yahoo 提供的免费在线性能测试工具，可以帮助你评估网站的性能，并提供优化建议。
  4. GTmetrix：一个免费的在线性能测试工具，可以帮助你评估网站的性能，并提供优化建议。
  5. Apache JMeter：一个开源免费的负载测试工具，可以模拟多种负载类型，如 HTTP、FTP、JDBC 等等。

包管理工具

npm

npm 是 Node.js 的默认程序包管理器，它是一个命令行工具，全球超过 1100 万开发人员所依赖，拥有超过一百万个软件包，是世界上最大的软件注册表。你可以在里面下载各种已经编写好的代码，像常用的 jQuery，webpack 等等。

npm 的优缺点

npm 的优点：

  • npm 是 Node.js 的默认程序包管理器，全球超过 1100 万开发人员所依赖，拥有超过一百万个软件包，是世界上最大的软件注册表。
  • npm 可以很方便地安装、更新和卸载 Node.js 模块。
  • npm 可以很方便地管理模块之间的依赖关系。
  • npm 可以很方便地发布和共享自己编写的模块。

npm 的缺点：

  • 由于版本号的影响，会造成版本不统一的情况。
  • 由于 npm 库存在嵌套依赖的关系，会增加无法匹配相应版本的概率。
  • npm 的输出信息比较冗长，在执行 npm install 的时候，命令行里会不断地打印出所有被安装上的依赖，不够简洁。

npm 常用命令有

  • npm init：初始化 package.json 文件。
  • npm install：安装 Node.js 模块。
  • npm install -g：全局安装 Node.js 模块。
  • npm update：更新 Node.js 模块。
  • npm uninstall：卸载 Node.js 模块。
  • npm ls：查看安装的 Node.js 模块。
  • npm help：查看帮助信息。
  • npm run：运行指定脚本命令。

如何创建并发布我的npm包？

你可以按照以下步骤发布自己的npm包

  1. 创建npm账号
  2. 在包根目录中，运行npm init命令并将范围传递给scope标志
  3. 响应提示以生成 package.json 文件。
  4. 创建一个README文件，说明您的程序包代码是什么以及如何使用它。
  5. 测试您的包
  6. 访问发布成功的包，修改 [my-package]访问
  7. 运行npm login命令以登录到npm
  8. 运行npm publish命令以发布您的包

yarn

yarn 是什么

Yarn是一个JavaScript软件包管理器，可以作为项目管理工具。它是npm的替代方案，具有速度快、安全、可靠的优点，在功能上相比于npm优化了许多功能等，例如网络性能优化，安装依赖的方式相同等。

yarn和npm的区别是什么？

Yarn和npm之间的主要区别在于：

  • Yarn的安装速度比npm快
  • Yarn可以离线安装依赖项，而npm不行
  • Yarn使用yarn.lock文件来确保依赖项的版本一致性，而npm使用package-lock.json文件
  • Yarn支持并行下载，而npm不支持
  • Yarn有更好的性能和可靠性

Yarn的安装速度为什么比npm快

Yarn和npm的性能比较是一个有争议的话题，因为它们的性能取决于许多因素，例如网络速度、硬件配置、软件版本等。但是，Yarn的安装速度比npm快，而且Yarn支持并行下载，这使得它在某些情况下比npm更快

npx是什么

npx是npm5.2之后发布的一个命令，它是“execute npm package binaries”的缩写，就是执行npm依赖包的二进制文件。它可以让您在不安装全局包的情况下运行命令，而且还可以让您轻松地运行本地安装的包中的可执行文件。

pnpm

pnpm是一个快速、节省磁盘空间的软件包管理器，它使用内容寻址文件系统将所有模块目录中的所有文件存储在磁盘上。与npm不同，如果您有100个使用lodash的项目，则在磁盘上将有100个lodash副本。而使用pnpm，lodash将存储在内容寻址存储中。

pnpm还支持多包存储库，因此您可以在单个存储库中管理多个包。

Lerna

Lerna是一个用于管理和发布多个JavaScript/TypeScript包的快速、现代化的构建系统，可以从同一存储库中管理和发布多个JavaScript/TypeScript包。Lerna的功能如下：

  1. Lerna可以指定不同目标（npm脚本）之间的依赖关系，以最高效的方式运行任何命令，并在尊重执行顺序的同时最大程度地并行化。
  2. Lerna可以在不必配置任何内容的情况下在多台计算机上运行任何命令。
  3. Lerna带有强大的交互式工作区。

Lerna 通过将多个包放在同一个仓库中，然后使用软链接的方式来实现多包管理。

Lerna 会将所有的包都放在 packages 目录下，每个包都有自己的 package.json 文件，这样就可以通过 lerna 命令来统一管理这些包。

镜像切换工具

常见的镜像切换工具有 nrm、yrm 等。其中 nrm 可以快速地切换 npm 命令的镜像源，但是无法修改 yarn 的镜像源；而 yrm 可以同步修改 npm 和 yarn 镜像源，它本身也是 nrm 的一个 Fork 分支。

此外，还有一些 git clone 加速镜像切换工具，例如 wogit 等。

您可以通过以下命令手动修改 npm 的镜像源：

npm config set registry https://registry.npm.taobao.org

其中，https://registry.npm.taobao.org 是淘宝镜像源的地址，您也可以使用其他的镜像源地址。

如果您想查看当前 npm 镜像源的地址，可以使用以下命令：

npm config get registry

如果您想恢复默认的 npm 镜像源，可以使用以下命令：

npm config set registry https://registry.npmjs.org

如何使用nrm

您可以使用 nrm 来管理 npm 的镜像源。nrm 是一个 npm 源管理器，可以快速地切换 npm 命令的镜像源。

以下是 nrm 的使用方法：

  1. 安装 nrm：

npm install -g nrm

  1. 查看可用的镜像源：

nrm ls

  1. 切换镜像源：

nrm use <registry>

其中，<registry> 是您想要切换到的镜像源名称。

  1. 添加自定义的镜像源：

nrm add <registry> <url>

其中，<registry> 是您想要添加的镜像源名称，<url> 是该镜像源的地址。

  1. 删除已有的镜像源：

nrm del <registry>

其中，<registry> 是您想要删除的镜像源名称。

node版本管理工具

常见的 Node.js 版本管理工具有 nvm、n、nvs 等。其中，nvm 是最常用的版本管理工具之一，它可以让您在同一台机器上安装和切换不同版本的 Node.js。

以下是 nvm 的使用方法：

安装 nvm： curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

查看可用的 Node.js 版本： nvm ls-remote

安装指定版本的 Node.js： nvm install <version>

其中，<version> 是您想要安装的 Node.js 版本号。

切换 Node.js 版本： nvm use <version>

其中，<version> 是您想要切换到的 Node.js 版本号。

查看当前正在使用的 Node.js 版本： nvm current

n 是一个 Node.js 版本管理工具，它可以让您在同一台机器上安装和切换不同版本的 Node.js。与 nvm 不同的是，n 是一个更加轻量级的版本管理工具，它不需要安装，只需要通过 npm 安装即可。

以下是 n 的使用方法：

  1. 安装 n：

npm install -g n

  1. 查看可用的 Node.js 版本：

n

  1. 安装指定版本的 Node.js：

n <version>

其中，<version> 是您想要安装的 Node.js 版本号。

  1. 切换 Node.js 版本：

n

然后选择您想要切换到的 Node.js 版本即可。

  1. 查看当前正在使用的 Node.js 版本：

node -v

数据监控

前端如何做数据监控

前端数据监控可以从以下几个方面入手：

  1. 页面的整体访问情况，包括常见的 PV、UV、用户行为上报。
  2. 页面的性能情况，包括加载耗时、接口耗时统计。
  3. 灰度发布与有效的监控能力，方便及时发现问题。
  4. 用户反馈问题，需要足够的日志定位问题。

具体实现方式有很多种，比如通过前端埋点、后端日志分析等方式。另外，也有很多开源的前端监控工具可以使用，比如 Fundebug、Sentry 等。

Sentry如何使用

Sentry 的使用步骤如下：

  1. 首先需要创建一个项目，选择平台，填写项目名称以及归属团队。
  2. 按照教程安装 Sentry 相关的库（以下示例为 Vue）。
  3. 在 main.js 中引入 Sentry 和 Integrations。
  4. 在 Vue 中使用 Sentry。
  5. 在 Sentry 官网上查看错误信息。

这里提供一篇文章，详细介绍了如何使用 Sentry：Sentry 服务的搭建和使用。

代码管理

Git

如何使用Git进行版本控制？

使用 Git 进行版本控制的步骤如下：

  1. 首先，需要安装 Git。您可以从官方网站下载并安装 Git。在 Windows 上使用它时，请确保将 Git 添加到环境变量 Path 中。在 Linux 中，您可以使用以下命令直接从终端安装它：sudo apt-get install git。
  2. 然后，需要初始化 Git 仓库。您可以使用 git init 命令来初始化一个新的 Git 仓库。
  3. 接下来，需要将文件添加到 Git 仓库中。您可以使用 git add 命令来添加文件。
  4. 然后，需要提交文件到 Git 仓库中。您可以使用 git commit 命令来提交文件。
  5. 如果需要，您可以创建分支和标签来管理代码的不同版本。
  6. 如果需要，您可以将本地的 Git 仓库推送到远程服务器上。

git 如何撤销提交

您可以使用以下命令在 Git 中撤销提交：

  1. 如果您想要恢复 git 仓库的先前状态，并将更改反映在 git 日志中，可以使用 git revert 命令；
  2. 如果您想要删除上次提交，可以使用 git reset 命令。

如何在 Git 中合并分支？

您可以使用以下命令在 Git 中合并分支：

  1. 使用 git merge 命令，该命令用来做分支合并，可以将其他分支中的内容合并到当前分支中；
  2. 使用 git rebase 命令，该命令用于改变当前的分支的基点，进而实现分支合并。

如何在 Git 中查看提交历史？

您可以使用以下命令来查看 Git 中的提交历史记录：

git log

这将显示所有提交的历史记录。如果您想查看更多的信息，例如提交的作者、提交的日期等，您可以使用以下命令：

git log --pretty=oneline

这将显示所有提交的历史记录，每个提交只显示一行。如果您想查看某个文件的提交历史记录，您可以使用以下命令：

git log <file>

这将显示指定文件的所有提交历史记录。

如何滚回git提交

您可以使用以下命令来回滚 Git 中的提交：

git reset --hard <commit_id>

这将回滚到指定的提交。如果您想撤消回滚，您可以使用以下命令：

git reflog
git reset --hard <commit_id>

这将撤消回滚并返回到指定的提交。

githook是什么

Git hook 是 Git 能在特定的重要动作发生时触发自定义脚本的钩子。Git hook 可以分为两类：客户端的和服务器端的。客户端钩子由诸如提交和合并这样的操作所调用，而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。

常见的 Git hook 有：pre-commit、pre-push、commit-msg、post-commit 等。

介绍一下GitFlow工作流

GitFlow 工作流是一种基于 Git 的团队协作方式，它通过为功能开发、发布准备和维护分配独立的分支，让发布迭代过程更流畅。GitFlow 工作流定义了严谨的分支管理模型，同时也为大型项目提供了健壮的管理框架。

GitFlow 工作流的主要分支有两个：master 和 develop。其中 master 分支是稳定的主干分支，只包含已经发布的版本；develop 分支是开发分支，包含所有功能的最新代码。在 GitFlow 工作流中，每个新功能都会从 develop 分支中创建一个新的 feature 分支，开发完成后再合并回 develop 分支。当 develop 分支上有足够多的功能时，就会从 develop 分支创建一个 release 分支，用于准备发布。在 release 分支上进行测试和修复 bug 后，将其合并回 master 和 develop 分支。如果在发布后发现了 bug，则从 master 分支创建一个 hotfix 分支进行修复，并将其合并回 master 和 develop 分支。

ESLint

ESLint如何使用

ESLint 的使用方法如下：

  1. 安装 ESLint：npm install eslint --save-dev
  2. 初始化 ESLint：./node_modules/.bin/eslint --init
  3. 配置 ESLint：在项目根目录下创建 .eslintrc.js 文件，然后在文件中添加配置信息。
  4. 运行 ESLint：./node_modules/.bin/eslint yourfile.js

你也可以使用 ESLint 的插件来扩展其功能，例如 eslint-plugin-react、eslint-plugin-vue 等等。如果你使用的是 VS Code，可以安装 ESLint 插件来自动检查代码。

CI/CD

CI/CD有哪些内容

实现 CI/CD 的步骤大致如下：

  1. 代码管理：使用 Git 管理代码。
  2. 持续集成：使用 Jenkins、GitLab 等工具进行持续集成。
  3. 自动化测试：使用 Jest、Mocha、Chai 等工具进行自动化测试。
  4. 镜像构建：使用 Docker 进行镜像构建。
  5. 镜像仓库：使用 Docker Hub、阿里云容器镜像服务等进行镜像仓库管理。
  6. 持续部署：使用 Kubernetes、Docker Swarm 等进行持续部署。

jenkins是什么

Jenkins是一个开源的、提供友好操作界面的持续集成 (CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行。Jenkins可以通过插件扩展其功能。

如何在Jenkins中创建构建项目

你可以按照以下步骤在Jenkins中创建构建项目：

  1. 打开Jenkins并单击左侧的“新建项目”按钮。
  2. 输入项目名称并选择“构建一个自由风格的软件项目”。
  3. 点击“确定”按钮。
  4. 在“源代码管理”部分中选择你的版本控制系统，例如Git。
  5. 在“构建触发器”部分中选择你的构建触发器，例如轮询SCM。
  6. 在“构建环境”部分中选择你的构建环境，例如NodeJS。
  7. 在“构建”部分中添加构建步骤，例如安装依赖项和构建前端应用程序。
  8. 点击“保存”按钮。

这是一个简单的流程，你可以根据你的需求进行修改。

GitLab怎么进行持续集成

你可以按照以下步骤在GitLab中进行持续集成：

  1. 在你的仓库根目录创建一个.gitlab-ci.yml文件。
  2. 为该项目指派一个Runner。
  3. 当有合并请求或者push的时候就会触发build。
  4. 这个.gitlab-ci.yml文件定义GitLab runner要做什么，例如构建、测试和部署你的应用程序。
  5. 你可以使用GitLab CI/CD来自动化构建、测试和部署你的应用程序。

这是一个简单的流程，你可以根据你的需求进行修改。

GitLab CI/CD如何与其他工具集成?

你可以使用GitLab CI/CD的API与其他工具集成。在GitLab CI/CD中，你可以使用Webhooks来触发构建，也可以使用API来触发构建。此外，GitLab CI/CD还提供了一个简单易用的界面，使得用户可以轻松地创建和管理他们的CI/CD流程。

GitLab CI/CD有哪些优点?

GitLab CI/CD有以下优点：

  1. GitLab CI/CD是由独立的runner程序完成，runner采用go语言编写，因此可以很好的进行跨平台，通常可以将runner部署到任何gitlab server之外的服务器，从而避免对gitlab server的影响。
  2. GitLab CI/CD与其他CI/CD工具相比，具有更好的集成性和更好的用户体验。
  3. GitLab CI/CD提供了一个简单易用的界面，使得用户可以轻松地创建和管理他们的CI/CD流程。
  4. GitLab CI/CD提供了一个强大的API，使得用户可以轻松地与其他工具集成。

Docker是什么

Docker是一种轻量级的虚拟化技术，同时也是一个开源的应用容器运行环境搭建平台。它可以让开发者以便捷方式打包应用到一个可移植的容器中，然后安装至任何运行Linux或Windows等系统的服务器上。

Docker有哪些优点?

Docker的优点包括：

Docker容器启动速度快，可以在数毫秒内启动。 Docker容器可以在主操作系统上直接与守护进程通信，为各个Docker容器分配资源，并将各个容器互相隔离。 Docker容器可以节省大量的磁盘空间和内存空间。 Docker容器可以在不同的主机之间迁移，而不需要重新配置环境。

前端如何构建docker

前端构建Docker的步骤如下：

编写Dockerfile文件，指定镜像源、工作目录、安装依赖等。 构建镜像，使用docker build命令。 运行容器，使用docker run命令。

avatar
文章
阅读
粉丝