h5项目开发入门指北

h5项目开发入门指北

最近刚接触公司的h5项目，踩了很多坑，问了很多问题，希望能记录下来帮助大家少走弯路。

1.安装抓包工具-Charles

（除了Charles还可以使用其他抓包工具这里以Charles举例）

为什么要使用抓包工具呢？我们平时在开发PC端的时候，可以使用Chrome的NetWork调试工具来帮助我们查看网络请求，虽然h5项目在开发阶段同样也能通过Chrome来查看网络请求。但我们往往有这样的场景：

• 拿到App端内跳转的h5页面地址
• 查看App中返回的数据是否正确（查看数据还可以通过vconsole或eruda）

我们在移动端无法感知网络请求，所以需要将我们移动端的请求代理到我们到电脑上，然后利用电脑上的抓包工作获取移动设备获取的网络请求。

安装Charles并且配置代理的方法

安装完成后就能愉快地抓包了！

查看返回的数据

2.安装移动端调试工具

eruda

我们在npm或者github搜索edura，我们首先来看看这个包的简介

然后根据在项目中引入(这里使用src的方式在React项目中引入)

找到项目的入口文件index.js

function loadScript(url) {
   
  const script = document.createElement