Tarayıcının Alametleri: Console API

Enes Başpınar /23 Eyl 2022

10 min read •––– views

Tarayıcılarla ilgili bazı bilgiler vermek için yeni seriye başlamak istedim sanki başladıklarımı bitirmiş gibi. İşte ilk yazım. Yeniler varsa kafa karıştıran her şeye API deme olayına bir açıklık getirelim öncelikle. Basitçe bir konuda sorumluluk sahibi olan bir uygulamanın özel bilgilerine erişmek için fonksiyonlar/parametreler barındıran yapıya API (application programming interface) diyebiliriz. console'un yanında document, window, fetch şeklinde örnekler çoğaltılabilir.

console.log() metodunu yazılımcılar olarak çok fazla kullanıyoruz hatta en fazla yazdığımız metod olabileceğine de bahse girerim. Peki console nesnesi bu kadarla mı sınırlı? Hiç sanmam. Öyleyse bir bakalım.

log() - info() - warn() - error() - debug()

Önce bi klasiklerden başlayalım. Konsola yazdığımız metinler farklı önem seviyelerine sahip olurlar. Ve hatta önemlerini belirten renk ve simgeler gibi görsel uyarıcılar ile gösterilebilirler.

log(), geliştirme yaparken değişkenin anlık durumunu görmek için geçici olarak kullanılabilir.

console result = await axios.get(...);
console.log("sadasdasdas", result);

info(), son kullanıcıya bir metodun doğru biçimde nasıl kullanılacağıyle ilgili bilgi verebilir.

console.info("React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. (react-hooks/rules-of-hooks)")

warn(), bir metodun isminin değiştiğini ya da artık kullanımdan kaldırılacağıyla ilgili kullanıcıya bildirebilir.

console.warn("Warning: componentWillMount has been renamed, and is not recommended for use. See https:/fb.me/react-unsafe-component-lifecycles for details.")

error(), kod çalıştırılırken karşılaşılan bir hatayı ya da yapılması unutulan bir şeyi bildirmek için kullanılabilir.

console.error('SyntaxError: /src/App.js: Unexpected token, expected "(" (5:2)')

debug(), bu da geliştirme yaparken anlık olarak değişkenleri görmek için kullanılabilir.

console.warn("Örnek bulamadım örnek...")

Bunları geliştirdiğimiz yazılımlarda her zaman aktif kullanmıyoruz ancak bir paket yazdığımız senaryoyu düşündüğümüzde kullanıcının herhangi bir hata ya da uyarıyı doğru bir şekilde anladığından emin olmak isteriz.

assert()

Konsola belirli koşullara göre mesaj yazdırmamızı sağlar. İşte olay budur. İlk parametrede verdiğimiz koşul false ise verdiğimiz ikinci parametreyi yazdırır. if içlerine log atmaya son!

const response = await fetch("https://jsonplaceholder.typicode.com/users");
const statusCode = response.status;
console.assert(statusCode === 200, {data: statusCode, error: "Occured an error!"})
// ya da
console.assert(statusCode === 200, "Occured an error!")

clear()

O ana kadar atılmış olan tüm mesajları temizler.

console.clear()

Tarayıcıda çalışsa da Node terminalinde temizlemez. Eğer bu işlevi isteniyorsa process.stdout.write('\033c'); gibi stdout'a direk müdahale eden bir kod tercih edilebilir.

count() - countReset()

İşte güzel bir tane geliyor. Normalde bir şeyin ne kadar render olduğunu vs kontrol etmek için geçici değişken oluşturup kullanırız ya heh işte artık gerek yok. count() reis kodda koyduğumuz yerde ne kadar çalıştığını tutar ver konsola çıktı olarak verir. Eğer sıfırlamak istersek de countReset() kullanırız. Sayaçları özelleştirmek için label parametresi verebilir ve sıfırlarken yine bu parametreyi kullanırız.

for (let i = 0; i < 5; i++) {
  console.count();
  console.count("myCounter");
  if (i === 2) {
    console.countReset();
  }
  if (i === 4) {
    console.countReset("myCounter");
  }
}

=== Output:

default: 1 myCounter: 1 default: 2 myCounter: 2 default: 1 myCounter: 3 default: 2 myCounter: 4 default: 3 myCounter: 1

Ama sıfırlamayı sakın unutmayın. Unutursanız kaldığı yerden saymaya devam ederler.

group() - groupCollapsed() - groupEnd()

Bazen çıktılar birbiriyle bağımlı oluyor. Mesela bir ilişkili değişkenlerin değerlerini görmek istiyoruz ancak bir döngü içerisindeseler ayıklamak zor olabiliyor. group() (genişletilmiş) ve groupCollapsed() (daraltılmış) ile grup oluştururuz. Gruplamayı bitirmek için groupEnd() kullanırız.

const name = "Enes";
const age = 21;
const city = "Bursa";
const country = "Turkey";
console.group("Person"); // ya da console.groupCollapsed()
console.log("Age: ", age);
console.log("City: ", city);
console.log("Country: ", country);
console.groupEnd();

kaynak

Ve hatta iç içe bile kümelemeyebiliriz.

const name = "Enes";
const age = 21;
const city = "Bursa";
const country = "Turkey";
console.group("Person"); // ya da console.groupCollapsed()
console.log("Age: ", age);
console.group("Location");
console.log("City: ", city);
console.log("Country: ", country);
console.groupEnd();
console.groupEnd();

kaynak

table()

Nesneleri ve dizileri konsolda okumak ölüm gibi oluyor. Bunları tablo şeklinde görselleştirebiliriz.

console.table(["Turkey", "Italy", "England"]);

kaynak

const people = [
    {firstName: "Kemal", age: 21},
    {firstName: "Can", age: 5},
    {firstName: "Gürbüz", age: 76},
];
console.table(people, ["firstName", "age"]);

kaynak

class Product {
  constructor(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
  }
}
const product = new Product("Elbise", "Kırmızı", 299.9);
console.table(product);

kaynak

class Product {
  constructor(name, color, price) {
    this.name = name;
    this.color = color;
    this.price = price;
  }
}
const dress = new Product("Elbise", "Kırmızı", 299.9);
const shoe = new Product("Ayakkabı", "Beyaz", 123);
const hat = new Product("Şapka", "Siyah", 520);
console.table([dress, shoe, hat], ["name", "color", "price"]);

kaynak

time() - timeEnd() - timeLog()

Bazen kodların çalışma süresini ölçmek isteriz. Başlangıçta tarih alırız, bitince tarih alırız ve aradaki farkı buluruz. Ancak bir kısayolumuz var. Zamanlayıcıyı başlatmak için time(), anlık değerini almak için timeLog(), sonlandırıp süresini ekrana yazdırmak için timeEnd() kullanırız.

console.time("myTimer");
for(let i = 0; i < 10; i+=1) { 
  console.timeLog("myTimer")
}
console.timeEnd("myTimer");

=== Output:

myTimer: 0.003173828125 ms myTimer: 0.06396484375 ms myTimer: 0.08984375 ms myTimer: 0.114013671875 ms myTimer: 0.135009765625 ms myTimer: 0.154052734375 ms myTimer: 0.196044921875 ms myTimer: 0.2119140625 ms myTimer: 0.23193359375 ms myTimer: 0.251953125 ms myTimer: 0.27392578125 ms

trace()

Bir fonksiyonun çağrılmasına kadar hangi sırayla hangi fonksiyonların çalıştığını görmek istersek kullanırız.

function mapData(result) {
  console.trace();
  return {
    name: result.name,
    username: result.username,
    email: result.email
  };
}
async function getResult(response) {
  const result = await response.json();
  return mapData(result);
}
async function fetchData(string) {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  return getResult(response);
}
await fetchData();

=== Output:console.trace
overrideMethod
mapData
getResult
await in getResult (async)
fetchData
await in fetchData (async)
(anonymous)

Serin ve muazzam bir cuma akşamının verdiği mutlulukla böyle minik bir yazı yazayım dedim.

Yazı burada biter. Sağlıcakla kalın.

Kaynaklar

https://developer.mozilla.org/en-US/docs/Web/API/Console_API