網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

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

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

預覽

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條迴響)

覺得這篇文章有用麼?分享一下讓更多人知道吧!

爲繼續支持本站繼續寫出優質文章、歡迎捐款!

注:本站同時長期承接WordPress外掛及主題制作、伺服器環境配置等,如需詳情,請「聯系我們」!

© 版權聲明:「暢想資源」之所有文章及資源系采用「創用 CC 姓名標示-非商業性-相同方式分享 3.0 香港 授權條款」發布及共享,轉載時須以相同方式發布並注明「原文鏈接」!

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

本文章由「」於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樓
    健康减肥博客 China 搜狗浏览器 Windows

    挺不错的,支持一下,以后会经常关注该博客,同时欢迎回访!

    [回覆]
  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
    向本站捐款:http://www.arefly.com/donate/ functions.js:5
    多謝您的訪問與支持! functions.js:6

    :grin:

    [回覆]
    • :grin: :grin: 向本站捐款:http://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. 3樓
    Junhunz China Google Chrome Windows

    作死啊@@@@@

    [回覆]
  21. 2樓
    快乐家园 China Google Chrome Windows

    加个图片也不错

    [回覆]
  22. 沙發
    吴尼玛 China Google Chrome Windows

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

    [回覆]
廣告載入中...

發表迴響



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


快捷鍵:Ctrl+Enter