新功能: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的圖片,作者修改

相關文章