網址執行 JS 程式碼

$ javascript:alert(document.cookie); // 直接複製的話, javascript會被吃掉

網址執行 HTML 程式碼

$ data:text/html,<h1>Hello, world!</h1>

瀏覽器當編輯器 ?

$ data:text/html, <html contenteditable>

頁面可編輯化 !

$ document.body.contentEditable='true';

即時編輯 CSS

$ <style style="display:block" contentEditable> body { color: blue } </style>

查看版面 CSS

* { background-color: rgba(255,0,0,.2); } 
* * { background-color: rgba(0,255,0,.2); } 
* * * { background-color: rgba(0,0,255,.2); } 
* * * * { background-color: rgba(255,0,255,.2); } 
* * * * * { background-color: rgba(0,255,255,.2); } 
* * * * * * { background-color: rgba(255,255,0,.2); }

console table 的方式呈現資料

$ var teams_data = [{team: 'Chelsea', goals: 4}, {team: 'Man. Utd', goals: 3}]; console.table(teams_data);

console 3D文字

$ console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")

console 圖片

console.log("%c+",
  `font-size: 1px;
  padding: 122px 217px;
  background-image: url(https://imgur.com/sYpYg8q.gif);
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;`);

前端冷知識

k0970133227@gmail.com

Share This Post