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

Kayce Basques
Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova
GitHub

Bağlantı noktası yönlendirmeyi kullanarak şunları yapabilirsiniz:

  • 1. Destek Kaydı. Farklı bir Chrome örneğinde açılmış olan bir sekmede hata ayıklayın.
  • 2. Destek Kaydı. Bir siteyi geliştirme makinesi web sunucusunda barındırabilir, ardından içeriğe USB kablosuyla bir Android cihazdan erişebilirsiniz.

2. Durumda bağlantı noktası yönlendirme, Android cihazınızdaki dinleme TCP bağlantı noktası üzerinden çalışır. Bu bağlantı noktası, geliştirme makinenizdeki 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 aktarılır. Dolayısıyla bu bağlantı, ağ yapılandırmanıza bağlı değildir.

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

Bağlantı noktası yönlendirmeyi kur

Destek kaydınıza bağlı olarak sonraki adımları uygulayın.

1. Örnek: Başka bir Chrome örneğine bağlantı noktası yönlendirmeyi ayarlayın

  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ıklamayı kullandığınız Chrome örneğinde:

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

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

      Hedef keşif ayarları penceresi.

    5. Cihazlar bölümünde yeni bir uzak hedef görürsünüz. Hata ayıklamak istediğiniz sekmenin yanındaki inspect'yi tıklayın.

      Uzak hedefteki sekmenin yanındaki denetleme bağlantısı.

  3. Cihaz modunda yeni bir Geliştirici Araçları penceresi açılır. Üst taraftaki adres çubuğuna, hata ayıklamak istediğiniz web sitesinin adresini girebilirsiniz.

    Geliştirici Araçları, cihaz modunda.

  4. Adres çubuğunun yanında 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 ayarlarını yapın. İşiniz bittiğinde Android cihazınızı listede göreceksiniz.

    Listedeki Android cihaz.

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

  3. Onay kutusunun yanındaki Bağlantı noktası yönlendirme'yi tıklayın.

  4. Bağlantı noktası yönlendirme ayarlarında localhost:8080 varsayılan olarak ayarlanmıştır. Bağlantı noktası 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ın ve Bitti'yi tıklayın.

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

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

  8. Done'ı (Bitti) tıklayın.

Bağlantı noktası yönlendirme ayarlandı. Üst tarafta ve cihaz adının yanında bağlantı noktasının durum göstergesini 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 girdiyseniz localhost:5000 URL'sine gidersiniz.

Özel yerel alan adlarıyla eşleme

Özel alan adı eşleme, bir Android cihazdaki özel alan adı kullanan geliştirme makinenizdeki bir web sunucusundan içerik 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. Dolayısıyla, bu alanı localhost (ör. 127.0.0.1 chrome.devtools) ile eşlemek için geliştirme makinenizdeki hosts dosyanızda bir giriş oluşturursunuz. Özel alan eşlemesini ve bağlantı noktası yönlendirmeyi ayarladıktan sonra, siteyi Android cihazınızda chrome.devtools URL'sinden görüntüleyebilirsiniz.

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

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

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.

  2. Android cihazınızda bağlantı noktası yönlendirmeyi ayarlayın. Local address (Yerel adres) alanına localhost: yazın ve ardından proxy sunucunuzun çalıştığı bağlantı noktasını 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ı girin (ör. 3333).

Cihazınızdaki proxy ayarlarını yapılandırın

Daha sonra, 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.

  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, bir ö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 yaptığından, özelleştirilmiş yerel alanınıza yapılan istekler doğru şekilde çözümlenir.

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

Web sunucunuz standart olmayan bir bağlantı noktasıyla ç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 chrome.devtools özel alan adını kullanıyorsa siteyi Android cihazınızdan görüntülerken chrome.devtools:7331 URL'sini kullanmanız gerekir.