網站最後更新日期:2018年8月29日
歡迎大家來到暢想資源 AREFLY.COM! 個人網站 更多聯絡方式
×

為網站之「開發人員工具」內添加彩蛋教學

大家有可能發現於許多其他的大站點內在瀏覽器的「開發人員工具」可以看到許多例如招聘信息等彩蛋,而今天暢想資源就來教大家如何在你的網站中也添加一個類似的彩蛋等著訪客去挖掘吧!

預覽

add-easter-eggs-to-developer-tools-demo

教學

1、首先將下方代碼添加到網頁底部的的最底部 </body> 前或主題所引用之JS文件內(例如「functions.js」等)即可! :razz:

提示:對於WordPress站點來說即須添加於主題的「footer.php」文件內!另外如果加入於HTML中要記得帶上 <script> 標簽哦~

注釋:console.log 後的 %c 是代表使用下一個參數內所寫之CSS(例如 color: orange; 等)!

2、當然你也可以加入標示為「警告」或「錯誤」類型的彩蛋,不過暢想資源並不推薦大家這麼做~ :laugh:

add-easter-eggs-to-developer-tools-1

3、現在你就可以在你網站的「開發人員工具」中找到你所加入的彩蛋啦! :razz:

add-easter-eggs-to-developer-tools-demo

參考

在「開發者工具」中加入彩蛋

歷史上的今天

2013年:給WordPress添加電子郵件登陸的功能(42條評論)

覺得這篇文章有用嗎?分享一下讓更多人受益吧!

© 版權聲明:本文章採用「姓名標示-非商業性-相同方式分享 4.0 國際(CC BY-NC-SA 4.0)」於「」發布,轉載時須以相同方式發布並註明「原文鏈接」!

本文固定鏈接:https://www.arefly.com/zh-tw/add-easter-eggs-to-developer-tools/

本文章由「超級efly」於2014年08月16日發表於「網路」分類

你可以發表評論,並在保留原文地址及作者的情況下引用到你的網站

轉載請註明:為網站之「開發人員工具」內添加彩蛋教學 | 暢想資源

關鍵字:, ,

為網站之「開發人員工具」內添加彩蛋教學:目前有 48 條留言
訪客以 25:23 暫時領先博主

評論載入中,請稍等……
  1. 22樓
    BigCat China Google Chrome Windows

    不錯啊

    [回復]
  2. 21樓
    iKirby China Google Chrome  W17Pro(Dualcore) Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.76 Safari/537.36

    這個有意思。順便看到了ABP,推薦下μBlock,兼容ABP規則,而且比它佔用資源少得多。在我的電腦上比ABP佔用內存少100多MB。

    [回復]
    • 好的~感謝推薦~下次去試試! :razz:

      [回復]
  3. 20樓
    路易大叔 China Mozilla Firefox Windows

    我還是不趕潮流了

    [回復]
  4. 19樓
    www.39123.cn China Mozilla Firefox Windows

    什麼彩蛋

    [回復]
  5. 18樓
    戀羽 China Google Chrome Windows

    這裡的玩法很多的,我自己就加了一個調試信息輸出的。

    [回復]
  6. 17樓
    松果 China Google Chrome Windows

    飄過 :cool:

    [回復]
  7. 16樓
    xnces China Google Chrome Windows

    不錯,先 Mark 一個,回頭試試!

    [回復]
  8. 15樓
    惜樂部落格 China Google Chrome Windows

    再次路過 表示我是好人

    [回復]
  9. 14樓
    南國羽 China Google Chrome Windows

    支持一下。以前見過某在線電視網站用過類似方法,不過那貨直接把右鍵菜單和開發者工具封了,換了幾個瀏覽器都沒法啟動。

    [回復]
    • 這些封右鍵/開發者工具的人煩死了 :crazy:

      [回復]
  10. 13樓
    劉印 China Google Chrome Windows

    查看本站源碼當心電腦爆炸!

    [回復]
  11. 挺不錯的,支持一下,以後會經常關注該部落格,同時歡迎回訪!

    [回復]
  12. 好像百度使用過這招吧,哈哈 :mrgreen:

    [回復]
  13. 10樓
    Rich China 搜狗瀏覽器 Windows

    歡迎訪問「暢想資源」! functions.js:1
    本站由「超級efly」製作 functions.js:2
    (C) 超級efly版權所有 functions.js:3
    並且使用部落格程式 WordPress 及主題 Weisay Simple functions.js:4
    向本站捐款:https://www.arefly.com/donate/ functions.js:5
    多謝您的訪問與支持! functions.js:6

    :grin:

    [回復]
    • :grin: :grin: 向本站捐款:https://www.arefly.com/donate/! :trick: :trick:

      [回復]
  14. 9樓
    分享好東西 China Google Chrome Windows

    。。

    瀏覽器裝了好多外掛啊沃茨。。

    [回復]
  15. 8樓
    php程序員 China Google Chrome Windows

    沒看到呢,難道是被禁止了么。

    [回復]
    • 需要點擊「開發人員工具」右上角的那個符號或者切換至「Console」才可以看到~~ :mrgreen:

      [回復]
  16. 7樓
    松果 China Google Chrome Windows

    簽到 :grin:

    [回復]
    • 今天簽到啦!時間:下午2:51:22(使用Arefly評論框自動簽到)

      [回復]
      • 松果 China Google Chrome Windows

        自帶回復?

        [回復]
        • 對呀~今天簽到啦!時間:下午3:11:11(使用Arefly評論框自動簽到)

          [回復]
  17. 6樓
    很黑很非洲 China Netscape Navigator iPhone

    你也是用的wptouch嗎?

    [回復]
  18. 5樓
    上邪 China Google Chrome Windows

    我網頁的源碼也有彩蛋

    [回復]
  19. 4樓
    惜樂部落格 China Google Chrome Windows

    路過支持下

    [回復]
  20. 地板
    Junhunz China Google Chrome Windows

    作死啊@@@@@

    [回復]
  21. 板凳
    快樂家園 China Google Chrome Windows

    加個圖片也不錯

    [回復]
  22. 沙發
    吳尼瑪 China Google Chrome Windows

    矮油,不好了,你忘加我版權了

    [回復]

發表評論



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter