# 请教：复杂网页的分析工具

**URL:** <https://forum.freemdict.com/t/topic/16681>\
**Category:** 软件经验交流展望\
**Created:** [2022 年10 月 30 日 02:34 UTC](https://forum.freemdict.com/t/topic/16681 "2022-10-30T02:34:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![surfactant](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/s/dbc845/32.png) [@surfactant](https://forum.freemdict.com/u/surfactant)\
**Post date:** [2022 年10 月 30 日 02:34 UTC](https://forum.freemdict.com/t/topic/16681/1 "2022-10-30T02:34:07Z")

</div>

现在很多网页本身就像一个独立的应用程序，有的是闭源主体在服务器运行而只把客户端浏览器当I/O设备，但更多是开源的其js代码可见直接在浏览器运行。这些在线应用常常界面和功能都非常完善，实际就是一个优质开源项目。如能移植到桌面应用中会是一个非常好的功能模块（当然如果商业项目会有版权问题）。

要分析这样的复杂网页，似乎一般多用 Chrome开发环境，一个具体节点能看的很明白，但总感觉难以把握全貌。

请教：有无更好的工具，可以把整个网页包括全部js代码完整载入到 IDE 中成为一个完整的 Project，以便进行全面细致的分析。或者Chrome就是最好的工具是我没用好？谢谢！

* * *

如：\<\>[W3Schools Tryit Editor](https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_hello)\<\>\<\>[Online HTML Editor](https://www.tutorialspoint.com/online_html_editor.php)\<\>  
\<\>[https://www.online-python.com/](https://www.online-python.com/)\<\>\<\>[https://regex101.com/](https://regex101.com/)\<\>

* * *

一个具体的应用实例就是前面写过的[一个 Access的VBA小程序中带语法识别的html编辑器](https://forum.freemdict.com/t/topic/16375/59)。设想是在独立的.NET应用中插入一个浏览器控件，在控件中运行移植过来的js程序，js的输出通过浏览器控件接口传回给.NET主程序，似乎有点像最近刚囫囵吞枣看到的 Electon 的开发模式。

---

<div class="post-metadata">

**Author:** ![atauzki](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/atauzki/32/1365_2.png) [@atauzki](https://forum.freemdict.com/u/atauzki)\
**Post date:** [2022 年10 月 30 日 03:54 UTC](https://forum.freemdict.com/t/topic/16681/2 "2022-10-30T03:54:21Z")

</div>

webstorm？

---

<div class="post-metadata">

**Author:** ![AnLuoRidge](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/anluoridge/32/35936_2.png) [@AnLuoRidge](https://forum.freemdict.com/u/AnLuoRidge)\
**Post date:** [2022 年10 月 30 日 03:57 UTC](https://forum.freemdict.com/t/topic/16681/3 "2022-10-30T03:57:25Z")

</div>

去搜下这些关键词，你就会知道为什么不可行了。uglify, minify, sourceMap, chunk, 逆向。

---

<div class="post-metadata">

**Author:** ![surfactant](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/s/dbc845/32.png) [@surfactant](https://forum.freemdict.com/u/surfactant)\
**Post date:** [2022 年10 月 30 日 04:06 UTC](https://forum.freemdict.com/t/topic/16681/4 "2022-10-30T04:06:37Z")

</div>

哦，明白了，代码保护起来了，那就不费那个劲了，谢谢！

---

<div class="post-metadata">

**Author:** ![舒服员](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E8%88%92/13edae/32.png) [@舒服员](https://forum.freemdict.com/u/%E8%88%92%E6%9C%8D%E5%91%98)\
**Post date:** [2022 年10 月 30 日 04:23 UTC](https://forum.freemdict.com/t/topic/16681/5 "2022-10-30T04:23:11Z")

</div>

> 现在很多网页本身就像一个独立的应用程序

这种叫spa(single page application), 确实就是应用, 你观察的很准.

单页面应用的架构基本都是相同的, 常用就那几个框架.

chrome 扩展 BuiltWith 可以分析网站使用了哪些技术.

分析本论坛, 发现它使用了Discourse (虽然很明显- -), 服务器是nginx.

---

<div class="post-metadata">

**Author:** ![surfactant](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/s/dbc845/32.png) [@surfactant](https://forum.freemdict.com/u/surfactant)\
**Post date:** [2022 年10 月 30 日 04:34 UTC](https://forum.freemdict.com/t/topic/16681/6 "2022-10-30T04:34:55Z")

</div>

以前觉得JS也就是让网页活泼一点的小技术，闹笑话了。前端看来真的是水很深，又长知识了，谢谢！
