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

Meggin Kearney
Meggin Kearney
Sofia Emelianova
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. Durum'da bağlantı noktası yönlendirme, Android cihazınızdaki dinleyici TCP bağlantı noktası üzerinden çalışır ve 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 iletilir. 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 özelliğiyle bu alandaki içeriğe erişecek şekilde ayarlayabilirsiniz.

Bağlantı noktası yönlendirmeyi kur

Destek kaydınıza bağlı olarak aşağıdaki adımları uygulayın.

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

  1. --remote-debugging-port=PORT parametresini kullanarak 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. Onay kutusu. Keşfet ağı hedefleri seçeneğinin işaretli olduğundan emin olun.
    3. Onay kutusunun yanındaki Yapılandır'ı tıklayın.
    4. Hedef bulma ayarları'na localhost:PORT girin, Onay kutusu. Port yönlendirmeyi etkinleştir'i işaretleyin ve Bitti'yi tıklayın.

      Hedef keşif ayarları penceresi.

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

      Uzaktan hedefteki sekmenin yanındaki incele bağlantısı.

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

    Cihaz modundaki Geliştirici Araçları.

  4. Adres çubuğunun yanından giriş yöntemlerini değiştirebilirsiniz.

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.

    Listede yer alan Android cihaz.

  2. Onay kutusu. USB cihazları bul 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 varsayılan olarak localhost:8080 ayarlanır. Port yönlendirmeyi etkinleştir'i işaretleyin.

    Bağlantı noktası yönlendirme ayarları..

  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 Port metin alanına, Android cihazınızda siteye erişmek istediğiniz bağlantı noktasının numarasını girin. Örneğin, siteye localhost:5000 adresinden erişmek isterseniz 5000 değerini 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 değerini girersiniz.

  8. Bitti'yi tıklayın.

Bağlantı noktası yönlendirme ayarlandı. Üstte, cihaz adının yanı sıra bağlantı noktası yönlendirmesinin durum göstergesini de görebilirsiniz.

Bağlantı noktası yönlendirme durumu.

İç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 girerseniz localhost:5000 adresine yönlendirilirsiniz.

Özel yerel alan adlarıyla eşleme

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

Örneğin, sitenizde yalnızca izin verilenler listesindeki chrome.devtools alanında çalışan bir üçüncü taraf JavaScript kitaplığı kullanıldığı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 eşleme ve bağlantı yönlendirme ayarlarını yaptıktan sonra siteyi Android cihazınızda chrome.devtools URL'sinde görüntüleyebilirsiniz.

Proxy sunucusuna 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 sunucularına örnek olarak verilebilir.

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

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

  2. Android cihazınızda bağlantı noktası yönlendirme ayarını yapın. Yerel adres alanına localhost: ve ardından proxy sunucunuzun çalıştığı bağlantı noktasını girin. Örneğin, 8000 bağlantı noktasında çalışıyorsa localhost:8000 değerini girersiniz. 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 sunucusu ile 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.

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

  4. Gelişmiş seçenekler'e dokunun. Proxy ayarları görüntülenir.

  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 ayarlarla cihazınız tüm isteklerini geliştirme makinenizdeki proxy'ye yönlendirir. Proxy, cihazınız adına istek gönderir. Bu sayede, özelleştirilmiş yerel alanınızla ilgili istekler düzgün şekilde çözülür.

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 isteğinde bulunurken bağlantı noktasını belirtmeyi unutmayın. Örneğin, web sunucunuz 7331 bağlantı noktasında chrome.devtools özel alanını kullanıyorsa siteyi Android cihazınızda görüntülerken chrome.devtools:7331 URL'sini kullanmanız gerekir.