Becerilerinizi geliştirmenize ve öğrenmenize yardımcı olması için mevcut kodu kullanmak. Çoğu büyük tarayıcıda web sitelerinden kod kopyalamanın yolu aşağıda açıklanmıştır.
Sıfırdan bir web sitesi oluşturmak, projenin karmaşıklığına bağlı olarak başınızı kaşımanıza neden olabilir. Bu zaman alıcı beceride ustalaşmak aylar veya yıllar alabilir. Sonuç olarak, çoğu profesyonel kodlayıcı, becerilerini iyileştirmek için süreçler ve kısayollar geliştirmiştir.
Bu, en popüler ve tekrarlayan programlama kodunun kullanışlı bir listesini tutmayı içerir. Bu makalede, Chrome, Firefox ve Edge gibi popüler tarayıcıları kullanarak web sitesi kodunu sorumlu bir şekilde kopyalamanıza izin veren başka bir numara öğreneceksiniz. Tamamlanmış kod örnekleri sunan paha biçilmez bir öğrenme kaynağı olabilir.
Chrome Kullanarak Web Sitelerinden Kod Nasıl Kopyalanır?
Chrome'da aşağıdaki yöntemleri kullanarak bir web sitesinden kod kopyalayabilirsiniz.
Sayfa Kaynağı Yoluyla
Bu, tarayıcıdan bağımsız olarak bir web sitesinin veya web sayfasının tüm kod tabanına erişmenin belki de en iyi ve en kolay yoludur. Sayfa kaynağını Chrome'da görüntülemek için, hedef web sitesine gidin ve sayfanın bağlantılar, resimler veya reklamlar dışındaki herhangi bir bölümünü sağ tıklayın.
Tıklamak Sayfa kaynağını görüntüle veya sadece basın Ctrl + U (Windows, Linux) veya Komut + U (Mac os işletim sistemi). Kodun istediğiniz kısmını veya tamamını kopyalayın ve tercih ettiğiniz kod düzenleyiciye yapıştırın.
F12 Kısayolu aracılığıyla
Bir web sitesine gidip düğmesine basarak Chrome Geliştirici Araçları'na kolayca erişebilirsiniz. F12. Chrome Geliştirici Araçları, web sitesi kodunu barındırır ve geliştiriciler için bir hata ayıklama aracı işlevi görür.
İstediğiniz tüm kodu seçin, kopyalayın ve istediğiniz bir kod düzenleyiciye yapıştırın.
Chrome Geliştirici Araçları paneline girmenin başka bir yolu da İnceleme aracıdır. Bunu yapmak için, kodu kopyalamak istediğiniz hedef web sitesini ziyaret edin. Şimdi basın Ctrl + Üst Karakter + ben (Windows, Linux) veya Komut + Seçenek + I (macOS), bu sizi doğrudan Geliştirme Araçları'na götürecektir.
Alternatif olarak, sayfanın herhangi bir temiz bölümünü sağ tıklayın ve İncelemek menü seçeneklerinden, sayfa kaynağını görüntüleme seçeneğinin hemen altında.
Chrome'un Diğer İşlemler Menüsü aracılığıyla
Web sitesi kodunu Chrome'da Dev Tools aracılığıyla keşfetmenin başka bir yolu da, hedef web sitesinin sağ üst köşesindeki üç nokta düğmesini tıklamaktır. Menü seçeneklerinden seçin Daha fazla araç, Daha sonra Geliştirici araçları.
İstediğiniz tüm kodu kopyalayın ve seçtiğiniz herhangi bir kod düzenleyiciye yapıştırın. Ayrıca, bir hata ayıklama aracı olmanın yanı sıra şunları da yapabilirsiniz: ekran görüntüsü almak için Chrome Geliştirme Araçları'nı kullanın.
Firefox Kullanarak Web Sitelerinden Kod Kopyalama
Firefox kullanarak web sitesi kodunu kopyalamanın farklı yolları.
Sayfa kaynağını görüntüle
Sayfa kaynağını görüntüleyerek Firefox'ta web sitesi koduna erişmek ve kopyalamak için, hedef web sitesini sağ tıklayın ve tıklayın Sayfa kaynağını görüntüle.
Alternatif olarak, basın Ctrl + U (Windows, Linux) veya Komut + U (Mac os işletim sistemi). İstediğiniz tüm kodu kopyalayın ve tercih ettiğiniz kod düzenleyicinize yapıştırın.
Sayfa kaynağını Firefox'ta üç satırlık hamburger menüsüne tıklayarak kolayca görüntüleyebilirsiniz. Daha fazla araçve tıklama Sayfa Kaynağı.
F12 Klavye Kısayolu ile
Tıpkı Chrome gibi, Firefox Dev Tools'ta da bir web sitesinin koduna klavyenizdeki F12 tuşuna basarak erişebilirsiniz.
Stil Düzenleyiciye özellikle dikkat ederek, aradığınız belirli kodu arayın. Şimdi, tüm bu kodu kopyalayıp favori kod düzenleyicinize yapıştırın ve sihrinizi yapın.
Yine, Chrome gibi, yerleşik İnceleme aracını kullanarak Firefox'ta web sitesi koduna eşit şekilde erişebilirsiniz. Bunu yapmak için, hedef web sitesinin boş bir bölümünü sağ tıklayın ve Q veya tıklayın İncelemek. Ayrıca basabilirsiniz Ctrl + Üst Karakter + ben (Windows, Linux) veya Komut + Seçenek + I (Mac os işletim sistemi).
Açıklandığı gibi, aradığınız kodu bulana kadar yolunuzu bulmak için Stil Düzenleyiciyi kullanmaya devam edebilirsiniz. Sonra kopyalayıp herhangi birine yapıştırın bulabileceğiniz en iyi kod editörleri.
Firefox Diğer Eylemler Menüsü aracılığıyla
Web sitesi kodunu Firefox'ta diğer işlemler menüsü aracılığıyla kopyalamak için, kodunu kopyalamak istediğiniz web sitesinden sağ üst köşedeki üç satırlı hamburger menüsünü tıklayın.
Seçme Daha fazla araç, sonra tıklayın Web Geliştirici Araçları. Buradan, istediğiniz kodu kopyalamak için Inspector veya Style Editor'ı kullanabilirsiniz.
Inspector için, girişlerde gezinmek için klavyenizdeki ok tuşlarını veya kaydırma çubuğunu kullanın. Stil Düzenleyici için, sol gezinme panelini kullanarak belirli satır öğelerine odaklanabilirsiniz. İstediğinizi bulduğunuzda, kopyalanan kodu kod düzenleyicinize yapıştırın ve zevkinize göre özelleştirin.
Edge Kullanarak Web Sitelerinden Kod Kopyalama
Web sitesi kodunu Edge kullanarak aşağıdaki gibi farklı şekillerde kolayca kopyalayabilirsiniz.
Sayfa kaynağını görüntüle
Sayfa kaynağını Microsoft Edge'de görüntüleyerek web sitesi kodunu kopyalamak için, hedef sitenin herhangi bir boş bölümünü sağ tıklayın ve öğesini seçin. Sayfa kaynağını görüntüle.
Alternatif olarak, sadece basabilirsiniz Ctrl + U (Windows, Linux) veya Komut + U (macOS), istediğiniz kısmı kopyalayın, bir düzenleyiciye yapıştırın ve kodu özelleştirmeye başlayın.
F12 Klavye Kısayolu ile
Edge kullanıyorsanız, kodu kopyalamak istediğiniz web sitesini ziyaret ettiğinizde sadece F12 tuşuna basarak web sitesi kodunu da kopyalayabilirsiniz.
Seçiminizi tıklayarak onaylayın DevTools'u açın. Dev Tools panelinde istediğiniz tüm kodu kolayca kopyalayabilir ve işinizi hızlandırabilirsiniz.
Edge'in Inspect aracını kullanarak web sitesi kodunu kopyalamak için, kodunu kopyalamak istediğiniz web sitesine gidin, herhangi bir temiz bölüme sağ tıklayın ve öğesini seçin. İncelemek.
Ayrıca basabilirsiniz Ctrl + Üst Karakter + ben (Windows, Linux) veya Komut + Seçenek + I (Mac os işletim sistemi). Ardından, çoğaltmak ve düzenlemek istediğiniz kodu kopyalayıp yapıştırabilirsiniz.
Via Edge'in Diğer Eylemler Düğmesi
Edge ayrıca DevTools paneline daha fazla eylem menüsü aracılığıyla erişmenizi sağlar. Bunu yapmak için, kodunu kopyalamak istediğiniz web sitesine gidin. Sağ üst köşedeki üç nokta düğmesine tıklayın ve tıklayın Daha fazla araç, Daha sonra Geliştirici Araçları.
Tarayıcınızda bu seçeneklerden veya özelliklerden herhangi biri yoksa, güncel olup olmadığını kontrol etmek isteyebilirsiniz. İşte Chrome, Firefox ve Edge nasıl kontrol edilir ve güncellenir.
Hangi yaklaşımı benimserseniz benimseyin ve hangi Chromium tabanlı tarayıcıyı kullanırsanız kullanın (Chrome, Firefox veya Edge), Geliştirme Araçları panelinin üç nokta menüsüne tıklayarak belirli dosyaları veya öğeleri arayabilir ve seçmek Aramak. Alternatif olarak, sadece basın Ctrl + Üst Karakter + F (Windows, Linux) veya Komut + Seçenek + F (Mac os işletim sistemi).
bu Açık dosya Ve Çalıştır komutu seçenekler, bir web sitesinde kod bulmak için de yararlıdır. Stil Düzenleyici Firefox'ta ve Elementler Chrome ve Edge geliştirme araçları panelinde.
Mevcut Web Sitesi Kodunu Kullanarak Becerilerinizi Geliştirin
Chrome, Firefox, Edge veya diğer Chromium tabanlı web tarayıcılarını (bu konu için) kullanıyor olun, zaten var olan web sitelerinden kod kopyalayarak çok fazla zaman ve enerji tasarrufu yapabilirsiniz.
Bununla birlikte, web sitesi kodunu kopyalamak yalnızca kendi öğrenmeniz ve çevrimdışı gezinmeniz için yapılmalıdır. Mevcut bir web sitesinin bir kopyasını oluşturmaya çalışmak ve olduğu gibi yayınlamak, telif hakkı ihlaline yol açabilir. Ayrıca mobil kod editörleri ile kodlamanızı hareket halindeyken de yapabilirsiniz.
