新功能:Chrome DevTools可以覆盖地理位置

[ad_1]
新功能:Chrome DevTools可以覆盖地理位置

谷歌通过Chrome DevTools发布了一个关于覆盖地理位置的开发者页面。此新页面取代旧页面。 Chrome可以覆盖您的地理位置,并使用Chrome DevTools显示不同的位置。这样您就可以测试网站如何响应不同的地理位置。

根据谷歌的官方开发者页面:

“许多网站利用用户位置,以便为其用户提供更相关的体验。例如,一旦用户授予网站访问其位置的权限,天气网站可能会显示用户所在区域的本地预测。

如果您正在构建一个根据用户所在位置而变化的UI,您可能希望确保该网站在世界各地的不同地方正常运行。“

如何使用Chrome显示不同的地理位置

这样做的方式并不直观。但它实际上很容易做到。以下是使用Chrome欺骗不同IP地址的方法。

在Chrome DevTools中覆盖您的地理位置

第1步:打开命令菜单

根据谷歌的开发者页面,这是如何进入地理定位覆盖:

“按Command + Shift + P(Mac)或Control + Shift + P(Windows,Linux,Chrome OS)打开命令菜单。”

这是导航到此功能的秘密握手。

第2步。输入“show sensors”字样

Chrome DevTools中显示传感器命令菜单“width =”532“height =”97“sizes =”(最大宽度:532px)100vw,532px“data-srcset =”https://cdn.searchenginejournal.com/wp-content /uploads/2019/05/show-sensors.png 532w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/show-sensors-480x88.png 480w“data-src =”https: //cdn.searchenginejournal.com/wp-content/uploads/2019/05/show-sensors.png

步骤3.选择地理位置
在此步骤中,您需要向下滚动以查看允许您选择地理位置的菜单项。

选择地理位置“width =”555“height =”444“sizes =”(最大宽度:555px)100vw,555px“data-srcset =”https://cdn.searchenginejournal.com/wp-content/uploads/2019 /05/select-location.png 555w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/select-location-480x384.png 480w“data-src =”https:// cdn。 searchenginejournal.com/wp-content/uploads/2019/05/select-location.png

如果您没有看到要模拟的地理位置,请单击标记为“管理”的按钮。

添加您自己的自定义地理位置“width =”527“height =”449“sizes =”(最大宽度:527px)100vw,527px“data-srcset =”https://cdn.searchenginejournal.com/wp-content/uploads /2019/05/add-custom-location-to-chro.png 527w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/add-custom-location-to-chro-480x409。 png 480w“data-src =”https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/add-custom-location-to-chro.png如何使用Chrome DevTools添加自定义地理位置

您可以使用“添加位置”按钮在地球上添加任何位置作为选择。单击该按钮可以选择添加要建模的确切地理位置的经度和纬度。

为了获得您希望模拟的城市地理定位的纬度和经度坐标,只需谷歌:纬度经度+城市名称

然后将坐标插入相应的框中,Chrome将模拟该地理位置以进行测试和调试。

使用Chrome欺骗任何地理位置

此时,您可以关闭开发工具面板并浏览到您想要的任何网站,它会响应您,就像您位于您选择的地理区域一样。

向Danny Sullivan致敬,提请注意这一点 在一条推文中

“哇@googlechrome现在允许你在开发者模式下设置自定义地理位置,这让我很开心。”

Google的Danny Sullivan的推文截图“width =”541“height =”360“sizes =”(最大宽度:541px)100vw,541px“data-srcset =”https://cdn.searchenginejournal.com/wp- content / uploads / 2019/05 / danny-sullivan.png 541w,https://cdn.searchenginejournal.com/wp-content/uploads/2019/05/danny-sullivan-480x319.png 480w“data-src =”https ://cdn.searchenginejournal.com/wp-content/uploads/2019/05/danny-sullivan.png

阅读Google的官方开发者页面:
使用Chrome DevTools覆盖地理位置

Shutterstock的图片,作者修改

相关文章