Exploring Web APIs: Console

Aug 11, 2024//-5 min

Tarayıcının sunduğu özelliklere erişmenize olanak tanıyan metodları ve parametreleri barındıran yapılara Web API denir.

Şimdiye kadar API olarak isimlendirmeseniz bile 

console
, 
window
ve 
fetch
gibi birçok Web API kullandınız. Bu makalede, 
console.log
'dan ibaret sanılan Console API'sine değineceğim.

Log methods

Önce klasiklerden başlayacağım. Uygulamadaki loglar farklı anlam ifade ederler. Örneğin kullanıcıyı bir fonksiyonun yerine bir başkasını kullanmak için uyarabilir, bir hata meydana geldiğini bildirebilir ya da sonuca dair bilgi verebilirsiniz.

log()
değişkenin anlık durumunu görmek için kullanılır.

1const result = await axios.get(...);
2console.log("Result:", result);

info()
son kullanıcıya bir metodun doğru biçimde nasıl kullanılacağıyle ilgili bilgi vermek için kullanılır.

1console.info(
2  '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)'
3);

warn()
bir metodun isminin değiştiğini ya da kullanımdan kaldırılacağını bildirmek için kullanılır.

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

error()
kodda karşılaşılan hatayı ya da yapılması unutulan adımları bildirmek için kullanılır.

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

debug()
geliştirme yaparken anlık olarak değişkenleri görmek için kullanılır. 
log()
'dan farklı olarak varsayılan olarak konsolda gözükmez. Chrome'dan örnek verilirse log seviyelerinden verbose'un seçili olması gerekir.

1const response = await fetch(...);
2console.debug("Backend Response:", response);

Bu metodların Chrome'da aşağıdaki gibi gözükür.

console.log
haricindekileri aktif kullanmayabilirsiniz ancak bir paket yazdığınızı varsayarsanız kullanıcının herhangi bir hata ya da uyarıyı doğru şekilde anladığından emin olmak istersiniz.

Assertion

Belirli koşullar gerçekleşmediği takdirde error loglamak için kullanabilirsiniz. İlk parametre olan koşul gerçekleşmediyse ikinci parametreyi yazdırır.

1const response = await fetch("https://jsonplaceholder.typicode.com/users");
2const statusCode = response.status;
3
4console.assert(statusCode === 200, "Occured an error!");
Occured an error!

Clear logs

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

1console.clear();

Bu metod, tarayıcıda çalışır ancak Node terminalinde çalışmadığını görürsünüz. Bunun yerine 

process.stdout.write('\033c');
gibi stdout'a direk müdahale eden bir komut tercih edilebilir.

Countable log

İşte güzel bir tane! Herhangi bir bloğunun kaç kez çalıştığını loglamak için değişken oluşturmaya son! 

count()
metodu bulunduğu kod bloğunun çalıştırılma sayısını saklar ve loglar. Sayacı sıfırlamak için 
countReset()
metodu kullanılır. Label parametresi vererek ayrı sayaçlar oluşturulabilir.

1for (let i = 0; i < 5; i++) {
2  console.count();
3  console.count("myCounter");
4
5  if (i === 2) {
6    console.countReset();
7  }
8
9  if (i === 4) {
10    console.countReset("myCounter");
11  }
12}
default: 1
myCounter: 1
default: 2
myCounter: 2
default: 1
myCounter: 3
default: 2
myCounter: 4
default: 3
myCounter: 1

Grouping logs

Loglarda birbiriyle bağlantılı log'ları ayırt etmek zor olabilir. 

group()
ve 
groupCollapsed()
ile logları gruplayabilirsiniz. Gruplamayı bitirmek içinse 
groupEnd()
kullanmalısınız.

1const name = "Enes";
2const age = 21;
3const city = "Bursa";
4const country = "Turkey";
5
6console.group("Person"); // ya da console.groupCollapsed()
7console.log("Age: ", age);
8console.log("City: ", city);
9console.log("Country: ", country);
10console.groupEnd();

İç içe de kümelenebilir.

1const name = "Enes";
2const age = 21;
3const city = "Bursa";
4const country = "Turkey";
5
6console.group("Person"); // ya da console.groupCollapsed()
7console.log("Age: ", age);
8console.group("Location");
9console.log("City: ", city);
10console.log("Country: ", country);
11console.groupEnd();
12console.groupEnd();

Log tables

Nesneleri ve dizileri konsolda okumak ölüm gibi oluyor. Bunları tablo formatında görselleştirebilirsiniz.

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

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

1class Product {
2  constructor(name, color, price) {
3    this.name = name;
4    this.color = color;
5    this.price = price;
6  }
7}
8
9const product = new Product("Elbise", "Kırmızı", 299.9);
10
11console.table(product);

1class Product {
2  constructor(name, color, price) {
3    this.name = name;
4    this.color = color;
5    this.price = price;
6  }
7}
8
9const dress = new Product("Elbise", "Kırmızı", 299.9);
10const shoe = new Product("Ayakkabı", "Beyaz", 123);
11const hat = new Product("Şapka", "Siyah", 520);
12
13console.table([dress, shoe, hat], ["name", "color", "price"]);

Time logs

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.

1console.time("myTimer");
2
3for (let i = 0; i < 10; i += 1) {
4  console.timeLog("myTimer");
5}
6
7console.timeEnd("myTimer");
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.

1function mapData(result) {
2  console.trace();
3
4  return {
5    name: result.name,
6    username: result.username,
7    email: result.email,
8  };
9}
10
11async function getResult(response) {
12  const result = await response.json();
13  return mapData(result);
14}
15
16async function fetchData(string) {
17  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
18  return getResult(response);
19}
20
21await fetchData();
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 yazdığım bu minik makale burada biter. Sağlıcakla kalın.

Kaynaklar