İlk test web uygulamanızı Chrome Geliştirici Araçları ile oluşturun

Bu kılavuzda Chrome Geliştirici Araçları ile ilk adımları öğrenmek için basit bir Test Web Uygulaması nasıl oluşturulacağını öğreneceksiniz. Projeyi kurulumundan uygulamanın çalıştırılmasına kadar gideceğiz, böylece Geliştirici Araçlarının güçlü özelliklerinden faydalanabileceksiniz. Daha önce deneyiminiz olsa da olmasa da bu adım adım kılavuz sizin için idealdir.

Önemli Bulgular

• Projeyi kurmak için Node.js ve NPM'ye ihtiyacınız vardır.
• Yeni bir proje oluşturmak kolay ve hızlıdır.
• Chrome Geliştirici Araçları'nı kullanarak uygulamanızı hassas bir şekilde hata ayıklamanıza olanak tanır.

Adım Adım Kılavuz

Test Web Uygulamanızı oluşturmak için bu basit adımları izleyin:

Adım 1: Node.js ve NPM'nin Yüklenmesi

Bir proje oluşturmadan önce Node.js ve NPM (Node Package Manager) yüklü olduğundan emin olmalısınız. Bunun için nodejs.org web sitesine gidin ve işletim sisteminize uygun olan yükleyici sürümünü indirin. Kurulumdan sonra terminalde npm -v komutunu girerek NPM'nin yüklü olup olmadığını kontrol edebilirsiniz.

Adım 2: Terminali Açma ve Dizin Oluşturma

Test Uygulamanızı oluşturmak için bir terminal veya komut istemcisini açın. Uygulamayı oluşturmak istediğiniz bir dizini seçmelisiniz. İlgili dizine gidin ve projeniz için bir alt dizin oluşturmak için aşağıdaki komutu girin.

Adım 3: Projeyi NPM ile Oluşturma

Yeni bir proje oluşturmak için npm create komutunu kullanın. Projeye bir ad seçebilirsiniz. Örneğimizde "Def Tools Test" adını kullanıyoruz. Basitçe npm create def-tools-test komutunu girin ve Enter tuşuna basın. Bir paket yüklemek isteyip istemediğiniz sorulabilir; bunu basitçe onaylayın.

Adım 4: Framework Seçimi

Proje oluşturulduktan sonra hangi çerçeveyi kullanmak istediğinizi sorulacaktır. Vue.js, React veya sadece Vanilla JavaScript gibi seçeneklerden birini seçebilirsiniz. Bu kılavuzda, saf JavaScript ile çalışmak için Vanilla'yı seçiyoruz.

Adım 5: TypeScript ve JavaScript Arasında Seçim Yapma

TypeScript ve JavaScript arasında seçim yapma imkanınız vardır. Bu rehberde temellerin anlaşılır olmasını sağlamak için JavaScript'i tercih ediyoruz.

Adım 6: Bağımlılıkların Kurulumu

Gerekli bağımlılıkları indirmek için terminalde npm install komutunu çalıştırın ve projenize yüklenmesi gereken modülleri indirin.

Adım 7: Proje Klasörünü Kontrol Etme

Kurulumdan sonra oluşturulan proje klasörünü kontrol edebilirsiniz. Hangi dosyaların yüklendiğini görmek için ls komutunu kullanın.

Adım 8: Geliştirme Sunucusunu Başlatma

Web Uygulamasını çalıştırmak için geliştirme sunucusunu başlatmanız gerekir. npm run dev komutunu girin. Bu, uygulamanızı sunan yerel bir sunucu başlatacaktır.

Adım 9: Uygulamayı Tarayıcıda Açma

Sunucu çalıştıktan sonra, genellikle http://localhost:3000 gibi bir URL'yi konsolda bulabilirsiniz. Chrome'u zaten varsayılan tarayıcı olarak kullanıyorsanız, bağlantıya tıklamanız yeterlidir. Aksi takdirde, adresi kopyalayıp Chrome'un adres çubuğuna yapıştırabilirsiniz.

Adım 10: Test Web Uygulamasını Keşfetmek

Uygulama açıldığında genellikle basit bir "Merhaba" ve bir sayacı düğmesinden oluşan kullanıcı arayüzünü göreceksiniz. Düğmeye tıklarsanız sayaç artar. Bu, DevTools'ları keşfetmek için basit ama işlevsel bir test uygulaması sağlar.

Adım 11: Chrome Developer Araçlarını Kullanma

Şimdi Chrome Developer Araçları'nı açmanın zamanı geldi. DevTools'ları ya menüden ya da bir sağ tıklama ve "İncele" seçeneği ile açabilirsiniz. Test Web Uygulamanızda gezinirken çeşitli öğeleri inceleyebilir, kodu hata ayıklabilir ve uygulamanızın performansını analiz edebilirsiniz.

Özet

Bu kılavuzda, Chrome Developer Araçlarının avantajlarından yararlanmak için basit bir Test Web Uygulaması nasıl oluşturulacağını öğrendiniz. Node.js ve NPM'in kurulumundan projenin oluşturulması ve Geliştirme Araçlarını kullanmaya kadar kendi uygulamalarınızı geliştirmek ve hata ayıklamak için şimdiye kadar ihtiyacınız olan bilgiye sahipsiniz.