# 前端web3入门脚本五：decode input data

By [Bot80926](https://paragraph.com/@bot80926) · 2023-05-04

---

于 2023-05-02 12:10:59 首次发布

版权声明：本文为博主原创文章，遵循 [CC 4.0 BY-SA](http://creativecommons.org/licenses/by-sa/4.0/) 版权协议，转载请附上原文出处链接和本声明。

一、前言
----

> 作为一个前端，在调用合约调试的时候，在区块浏览器里拿到一串 hex 格式的 input data，我们应该怎么decode呢？

二、举例
----

![](https://storage.googleapis.com/papyrus_images/6a9638f68b0f52aff212e5583273f4232ca6137cade5171010003fa587096614.png)

1.  从这里我们可以拿到 Input Data （目前etherscan是已经支持默认input data解码了的，这里用etherscan的一条交易举例，毕竟不是所有公链的区块浏览器都支持解码功能，作为开发者我们需要掌握主动解码的能力。
    
2.  在这个页面我们能看到这笔交易调用的是 pancake V3的合约, 点进去能够获得 对应 V3 合约的 abi。
    

![](https://storage.googleapis.com/papyrus_images/713f129ac3be42a401842152793f75d17d7673ac0d300328e01c8ae6450a6851.png)

三、脚本解释
------

    const InputDataDecoder = require('ethereum-input-data-decoder');
    const v3Router = require('../abis/pancakeRouterV3.json')
    const decoder = new InputDataDecoder(v3Router);
    
    // tx url: https://etherscan.io/tx/0x4169ddf78be52aade30a6043feac7d6a3b00bddad64e80d27e660761cec7d0ef
    // pancake v3 router: https://etherscan.io/address/0x13f4ea83d0bd40e75c8222255bc855a974568dd4#code
    const data = '0x5ae401dc00000000000000000000000000000000000000000000000000000000645088eb00000000000000000000000000000000000000000000000000000000000000400000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000e404e45aaf000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc20000000000000000000000006982508145454ce325ddbe47a25d4ec3d231193300000000000000000000000000000000000000000000000000000000000009c4000000000000000000000000307e3fdf958e61e593ffd53efa68bd798477c7bd0000000000000000000000000000000000000000000000000058d15e176280000000000000000000000000000000000000000000001d4ebb90dc9195172b5342000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
    const result = decoder.decodeData(data);
    console.log(result);
    
    const multicallData = '0x04e45aaf000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc20000000000000000000000006982508145454ce325ddbe47a25d4ec3d231193300000000000000000000000000000000000000000000000000000000000009c4000000000000000000000000307e3fdf958e61e593ffd53efa68bd798477c7bd0000000000000000000000000000000000000000000000000058d15e176280000000000000000000000000000000000000000000001d4ebb90dc9195172b53420000000000000000000000000000000000000000000000000000000000000000'
    const resultMulticallData = decoder.decodeData(multicallData);
    console.log(resultMulticallData);
    

完整代码就是上面所有，可以看到我们借助了 [ethereum-input-data-decoder](https://www.npmjs.com/package/ethereum-input-data-decoder) 这个库的能力，只需要引入对应 合约 abi 和 需要 decode 的 input data即可。 上述例子运行结果如下：

![](https://storage.googleapis.com/papyrus_images/8b8815f279b19c5a195a7f48817dc424d258285913be3508938d1fa3e6785858.png)

四、结尾
----

完整代码可以访问我的[github仓库](https://github.com/Bot80926/ethers-scripts/blob/main/script-6-input-data-decoder/index.js)，欢迎 follow/star/fork/提issue… 交个朋友 🌞上面介绍的decoder input data 的方法，如果你想 encode 交易内容的话， 可以访问这个 [encode网站](https://abi.hashex.org/)，根据指引导入 abi 和 对应参数即可编译出来。

---

*Originally published on [Bot80926](https://paragraph.com/@bot80926/web3-decode-input-data-2)*