网站最后更新日期:2018年7月10日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 赞好Facebook 追随Twitter 关注微博
关注微信公众号
捐款 更多联络方式
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条评论)

觉得这篇文章有用吗?分享一下让更多人知道吧!

为继续支持本站继续写出优质文章、欢迎捐款!

© 版权声明:本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际(CC BY-NC-SA 4.0)”发布及共享,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:https://www.arefly.com/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楼
    健康减肥博客 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
    向本站捐款: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