请教下如何获取网站手机版 ui 数据

[cpalead]

现在要做一个 app ，样式跟一个网站的手机版类似，没有设计师，我自己怎么获取手机版上面元素的大小和文字大小的事情，我需要把这些大小切换到安卓手机上，这个对应关系是怎么样的呢？
感谢各位 v 友

[lybcyd]

PC chrome 开发者工具 - 设备工具栏，设置成移动端 UA

[cpalead]

@lybcyd 这个搞了，而且切换设备的旁边那个按钮可以选元素，看到元素的大小这些东西，还有更高效的东西吗

[Rache1]

你可能需要这个

stevenlei/spacingjs: A JavaScript utility for measuring the spacing between elements on webpage.
https://github.com/stevenlei/spacingjs

[Rache1]

还有个 Chrome 插件，ViaBug

VisBug - Chrome 应用商店
https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

[shawndev]

https://www.figma.com/community/plugin/1159123024924461424/html.to.design

[Rache1]

@shawndev 乖乖，这也太秀了 😂

[cpstar]

我只想说，关键是调好 safari 这一新时代 ie11

[cpalead]

@Rache1 VisBug 这个很好用，但是有个问题，我是预览的手机版的网页，这个就用不了了，在电脑端的网页，我点开，用这个 VisBug 是很方便的，但是我要测手机端浏览器网站是数据
我现在看手机端网页的办法是 chrome 的 f12 设置模拟的设备看的

[corcre]

chrome 的话, 要不要考虑一下远程调试然后直接在 pc 端获取你需要的数据

[cpalead]

@corcre 啥叫远程调试？我现在是想做个 app 界面跟这个网站的手机端页面看起来一样

[cpalead]

@shawndev 这个总是提示网站连接失败，我让它解析百度也是连接失败。怎么办？谷歌了一下，也没有解决办法

[cpalead]

@shawndev 我挂个代理，貌似成功了

[corcre]

@cpalead http://www.ruanyifeng.com/blog/2019/06/android-remote-debugging.html
就是用 chrome 连上你的安卓设备然后可以在 pc 端看到手机页面的信息, 但是我只了解安卓可以这么做, 别的不太清楚

[corcre]

@cpalead 反正就是在 pc 端打开了移动端 chrome 的 DevTools...

[cpalead]

@corcre 这个是调试的办法，我是想 copy ui ，用不上，还是谢谢

[krapnik]

https://sample-code.aspect.app/

[happy61]

@krapnik 那如果不是 Copy React 代码，有直接 copy 普通的 html 的么