辅助 ai 调试网页布局问题,我这里有一个解法

52 天前
 dbow

考虑到国产的模型普遍不是多模态的,对不支持图片的模型,我暂时想到用这种布局矩阵来做, 大家有什么更好的方法分享一下。 布局矩阵:

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■·Y·····························································C··D··E·F··G···■
■··············································································■
■y·············································································■
■·········H···············································d··········X·········■
■·········I···············································g···h······4·········■
■······················2··································i··j··k····5·········■
■·········J···············································l···m······6·········■
■·········K············3··································n··········7·········■
■·········L····································································■
■·························································e··········8·········■
■·········M···············································r··········9·········■
■····················Z·················a·················s···········A·········■
■························································to··········B·········■
■····················N·················O··················p····················■
■····················u·················v··················q····················■
■··············································································■
■·························································f····················■
■····················b·················c··················R···S···T············■
■··············································································■
■····················P·················Q··················U···V···W············■
■····················w·················x·······································■
■·········································································1····■
■··············································································■
■··············································································■
Legend:
────────────────────────────────────────────────────────────────────────────────

1: <div class="floating-element" onclick="scrollToTop()">
   Matrix Pos: (74, 22) Actual Pos: (1623, 795) Size: 60×60
   Text: "↑"

2: <h1>
   Matrix Pos: (23, 6) Actual Pos: (487, 190) Size: 640×68
   Text: "复杂布局测试页面"

1916 次点击
所在节点    程序员
4 条回复
TArysiyehua
52 天前
你让 ai 借助 shell ,curl 请求一下分析得到的网页结构是不是更容易?
dbow
52 天前
@TArysiyehua curl 出来的 html ,ai 诊断不了 css 的影响
davin
52 天前
上个月,Chrome 团队发布了 Chrome DevTools MCP 这个神器,应该可以来解决楼主说的布局调试问题吧!
dbow
52 天前
@davin 看了下,它是截图的,take screenshot

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1165331

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX