Bağlantı noktası yönlendirme ile yerel sunuculara ve Chrome örneklerine erişme

Kayce Basques

Meggin Kearney

Sofia Emelianova

Bağlantı noktası yönlendirmeyi kullanarak:

• 1. durum. Farklı bir Chrome örneğinde açılan bir sekmede hata ayıklama
• 2. Durum Bir siteyi geliştirme makinesi web sunucusunda barındırın, ardından USB kablosuyla Android cihazdan içeriğe erişin.

2. durumda bağlantı noktası yönlendirme, Android cihazınızdaki bir dinleme TCP bağlantı noktası üzerinden çalışır. Bu bağlantı noktası, geliştirme makinenizdeki bir TCP bağlantı noktasıyla eşlenir. Bağlantı noktaları arasındaki trafik, Android cihazınız ile geliştirme makineniz arasındaki USB bağlantısı üzerinden gerçekleşir. Bu nedenle, bağlantı ağ yapılandırmanıza bağlı değildir.

Ayrıca, web sunucunuz özel bir alan kullanıyorsa Android cihazınızı özel alan eşleme ile bu alandaki içeriğe erişecek şekilde ayarlayabilirsiniz.

Bağlantı noktası yönlendirmeyi kur

Durumunuza bağlı olarak sonraki adımları uygulayın.

1. durum: Bağlantı noktası yönlendirmeyi başka bir Chrome örneğine ayarlama

1. --remote-debugging-port=PORT parametresiyle başka bir Chrome örneği çalıştırın. Örneğin:

   MacOS

   open -a "Google Chrome" --args --remote-debugging-port=PORT

   Windows

   start chrome --remote-debugging-port=PORT

   Linux

   google-chrome --remote-debugging-port=PORT

2. Hata ayıklama yaptığınız Chrome örneğinde:

   1. chrome://inspect/#devices adlı kişiyi aç.
   2. Keşfet ağı hedeflerinin işaretli olduğundan emin olun.
   3. Onay kutusunun yanındaki Yapılandır'ı tıklayın.

   4. Hedef bulma ayarları bölümünde localhost:PORT girin, Bağlantı noktası yönlendirmeyi etkinleştir'i işaretleyin ve Bitti'yi tıklayın.

      

   5. Cihazlar'a döndüğünüzde yeni bir uzaktan hedef görürsünüz. Hata ayıklamak istediğiniz sekmenin yanındaki incele'yi tıklayın.

      

3. Cihaz modunda yeni bir DevTools penceresi açılır. Üstteki adres çubuğuna hata ayıklamak istediğiniz web sitesinin adresini girebilirsiniz.

   

4. Adres çubuğunun yanında giriş yöntemleri arasında geçiş yapabilirsiniz.

2. durum: Android cihazınız için USB üzerinden bağlantı noktası yönlendirmeyi ayarlama

1. Geliştirme makineniz ile Android cihazınız arasında uzaktan hata ayıklama ayarlayın. İşlemi tamamladığınızda Android cihazınızı listede görürsünüz.

   

2. USB cihazları keşfet seçeneğinin işaretli olduğundan emin olun.

3. Onay kutusunun yanındaki Port yönlendirme'yi tıklayın.

4. Bağlantı noktası yönlendirme ayarlarında localhost:8080 varsayılan olarak ayarlanır. Enable port forwarding'i (Bağlantı noktası yönlendirmeyi etkinleştir) işaretleyin.

   .

5. Başka bağlantı noktaları ayarlamak istiyorsanız sonraki adımları uygulayın. Aksi takdirde adımları atlayıp Bitti'yi tıklayın.

6. Soldaki Bağlantı noktası metin alanına, Android cihazınızda siteye erişmek istediğiniz bağlantı noktası numarasını girin. Örneğin, siteye localhost:5000 konumundan erişmek istiyorsanız 5000 girersiniz.

7. Sağdaki IP adresi ve bağlantı noktası metin alanına, sitenizin geliştirme makinenizin web sunucusunda çalıştığı IP adresini veya ana makine adını ve ardından bağlantı noktası numarasını girin. Örneğin, siteniz localhost:5000 üzerinde çalışıyorsa localhost:5000 girmeniz gerekir.

8. Bitti'yi tıklayın.

Bağlantı noktası yönlendirme ayarlandı. Bağlantı noktası yönlendirme durum göstergesini üstte ve cihaz adının yanında da görebilirsiniz.

İçeriği görüntülemek için Android cihazınızda Chrome'u açın ve Cihaz bağlantı noktası alanında belirttiğiniz localhost bağlantı noktasına gidin. Örneğin, alana 5000 girdiyseniz localhost:5000 adresine yönlendirilirsiniz.

Özel yerel alanlarla eşleme

Özel alan eşleme, geliştirme makinenizdeki bir web sunucusunda bulunan içeriği özel alan adı kullanarak Android cihazda görüntülemenize olanak tanır.

Örneğin, sitenizin yalnızca izin verilenler listesindeki chrome.devtools alanında çalışan bir üçüncü taraf JavaScript kitaplığı kullandığını varsayalım. Bu nedenle, bu alanı localhost ile eşlemek için geliştirme makinenizdeki hosts dosyanızda bir giriş oluşturursunuz (ör. 127.0.0.1 chrome.devtools). Özel alan adı eşleme ve bağlantı noktası yönlendirme ayarlarını yaptıktan sonra, siteyi Android cihazınızda chrome.devtools URL'sinde görüntüleyebilirsiniz.

Proxy sunucuya bağlantı noktası yönlendirmeyi ayarlama

Özel bir alanı eşlemek için geliştirme makinenizde bir proxy sunucusu çalıştırmanız gerekir. Charles, Squid ve Fiddler, proxy sunuculara örnek olarak verilebilir.

Bir proxy'ye bağlantı noktası yönlendirmeyi ayarlamak için:

1. Proxy sunucuyu çalıştırın ve kullandığı bağlantı noktasını not edin.

   Not: Proxy sunucu ve web sunucunuz farklı bağlantı noktalarında çalışmalıdır.

2. Android cihazınızda bağlantı noktası yönlendirmeyi ayarlayın. Yerel adres alanına, proxy sunucunuzun çalıştığı bağlantı noktasıyla birlikte localhost: girin. Örneğin, 8000 bağlantı noktasında çalışıyorsa localhost:8000 girmeniz gerekir. Cihaz bağlantı noktası alanına Android cihazınızın dinlemesini istediğiniz numarayı (ör. 3333) girin.

Cihazınızda proxy ayarlarını yapılandırma

Ardından, Android cihazınızı proxy sunucusuyla iletişim kuracak şekilde yapılandırmanız gerekir.

1. Android cihazınızda Ayarlar > Kablosuz'a gidin.

2. Bağlı olduğunuz ağın adına uzun basın.

   Not: Proxy ayarları ağ başına geçerlidir.

3. Ağı değiştir'e dokunun.

4. Gelişmiş seçenekler'e dokunun. Proxy ayarları gösterilir.

5. Proxy menüsüne dokunup Manuel'i seçin.

6. Proxy ana makine adı alanına localhost girin.

7. Proxy bağlantı noktası alanına, önceki bölümde cihaz bağlantı noktası için girdiğiniz bağlantı noktası numarasını girin.

8. Kaydet'e dokunun.

Bu ayarlar sayesinde cihazınız tüm isteklerini geliştirme makinenizdeki proxy'ye yönlendirir. Proxy, cihazınız adına istekte bulunduğundan özelleştirilmiş yerel alanınıza yapılan istekler düzgün şekilde çözümlenir.

Artık Android cihazınızda özel alanlara, geliştirme makinesinde olduğu gibi erişebilirsiniz.

Web sunucunuz standart olmayan bir bağlantı noktasında çalışıyorsa Android cihazınızdan içerik isterken bağlantı noktasını belirtmeyi unutmayın. Örneğin, web sunucunuz 7331 bağlantı noktasında özel alan chrome.devtools kullanıyorsa siteyi Android cihazınızdan görüntülerken chrome.devtools:7331 URL'sini kullanmanız gerekir.

İpucu: Normal taramaya devam etmek için geliştirme makinesinin bağlantısını kestikten sonra Android cihazınızdaki proxy ayarlarını geri döndürmeyi unutmayın.