Console.chat 在瀏覽器的開發人員工具加入一個文字聊天室

Console.chat 在瀏覽器的開發人員工具加入一個文字聊天室

趁著最近空閒時間較多,介紹一些特殊、趣味性十足的小工具吧!如果你是網站開發者,一定知道瀏覽器都會內建「開發人員工具」,也就是打開後有很多輔助開發功能,例如最常用的是檢查打開網頁時載入那些圖片、程式或檔案,這也可用於瞭解網站是否有被拖慢速度的問題,還能點選網頁中的元件,快速查看相關程式碼、CSS 等資訊,非常好用!當然開發人員工具功能不少,這只是其中幾項,那還有沒有其他的應用方式呢?

本文要介紹的「Console.chat」非常有意思,利用一段 JavaScript 程式碼將聊天室放進開發人員工具裡,就能直接在瀏覽器的控制台(Console)進行文字對話,聽起來好像沒什麼用,實際上也真的沒什麼用,不過利用指令功能文字聊天似乎已經是上個時代的事了,是有一種回到過去的感覺(好懷念早期的 Mud 啊…)。

在網站裡插入一段 Console.chat 的 JavaScript 程式就能完成,功能不多,只有設定暱稱、傳送訊息和訊息變色三種功能,之後回來可以看到其他人留下的對話紀錄,能正常顯示中文,如果想研究一下 Console.chat 是如何做到也能從 GitHub 頁面找到完整的原始碼。

網站名稱:Console.chat
網站鏈結:https://console.chat/

使用教學

STEP 1

開啟 Console.chat 網站會有簡單介紹,下方有一段 JavaScript 程式碼可以讓你將控制台聊天室功能放入任何網頁,不過在此之前,可直接從 Console.chat 網站進行測試。

Console.chat

STEP 2

打開瀏覽器的「開發人員工具」點選「Console」會隨即看到介紹,要啟動聊天室功能必須先輸入一段指令:cc() ,再輸入一次 cc() 就能停止載入聊天室訊息。

Console.chat

STEP 3

開啟 Console 聊天室,可能一開始不知道要如何使用,輸入 help() 指令會有簡單教學。

  • username(“your username”) 設定你的暱稱。
  • send(“your message”) 傳送你輸入的訊息。
  • send(“your message”,”254cf5") 輸入色碼可改變訊息顏色。
Console.chat

STEP 4

實際測試一下 Console.chat 確實可以設定暱稱。

Console.chat

設定後就能傳送訊息,如果訊息中帶有鏈結,會在傳送出去後自動轉為超連結。

Console.chat

Console.chat 本身有防止訊息洗版的設計,無法連續傳送相同訊息,會跳出錯誤提示。

Console.chat

若要關閉聊天室,只要把網頁關閉,或是輸入 cc() 即可結束對話,瀏覽器就不會繼續載入更多訊息,目前沒有更多的功能,如果對原始碼有興趣可以前往 Console.chat 的 GitHub 頁面,能找到更多開發相關資訊。

值得一試的三個理由:

  1. 以 JavaScript 程式碼在開發人員工具加入聊天功能
  2. 純文字聊天模式,可設定暱稱、訊息顏色
  3. 可查看過往的聊天紀錄
分享本文
×