{"id":31554714,"url":"https://github.com/diamont1001/funny-console","last_synced_at":"2025-10-04T21:13:34.383Z","repository":{"id":57243174,"uuid":"116127159","full_name":"diamont1001/funny-console","owner":"diamont1001","description":"funny console in browser's dev-tools just like Chrome and Safari.","archived":false,"fork":false,"pushed_at":"2018-01-04T14:02:35.000Z","size":2573,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-28T01:54:11.743Z","etag":null,"topics":["chrome","console","consolelog","devtools","safari"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diamont1001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-03T11:02:50.000Z","updated_at":"2025-02-10T23:13:07.000Z","dependencies_parsed_at":"2022-09-15T08:50:31.031Z","dependency_job_id":null,"html_url":"https://github.com/diamont1001/funny-console","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/diamont1001/funny-console","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diamont1001%2Ffunny-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diamont1001%2Ffunny-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diamont1001%2Ffunny-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diamont1001%2Ffunny-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diamont1001","download_url":"https://codeload.github.com/diamont1001/funny-console/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diamont1001%2Ffunny-console/sbom","scorecard":{"id":340843,"data":{"date":"2025-08-11","repo":{"name":"github.com/diamont1001/funny-console","commit":"ce9f49ff17bae64ea8898fbe3278feb39d35a177"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"18 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T05:48:50.178Z","repository_id":57243174,"created_at":"2025-08-18T05:48:50.178Z","updated_at":"2025-08-18T05:48:50.178Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278373516,"owners_count":25976150,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","console","consolelog","devtools","safari"],"created_at":"2025-10-04T21:13:29.228Z","updated_at":"2025-10-04T21:13:34.376Z","avatar_url":"https://github.com/diamont1001.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Console 百科\n\n`console` 我们用的多了，但是，我们平时用的很多的只是 `console.log`，其实它还有更多的更好玩的玩法，你，知道吗？\n\n首先来看看天猫的 `console` 输出：\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/tmall.png)\n\n看这个还是挺好玩的，先做了个安全提醒，然后再做下招聘广告，逼格马上就上来了。\n\n当然，平时咱们的站点页面也可以这么搞。下面，就让我们一起来揭开 `console` 的神秘面纱吧。\n\n## Console API\n\n参考 [https://developer.mozilla.org/en-US/docs/Web/API/console](https://developer.mozilla.org/en-US/docs/Web/API/console)，关于 `console` 的 API 这里说的比较全。\n\n\n### 1. 图片展示：`console.img`（非原生，要引入本库 `funny-console`）\n\n图片展示我觉得比较酷炫，但是接口调用起来还是有点麻烦，因此我这里给封装了一层，加了个接口 `console.img`，可以更方便的在 Dev Tools 里输出图片。\n\n#### 参数说明\n\n`console.img(url, width, height, opt)`\n\n- url: 要显示的图片URL\n- width: 图片展示大小 width，默认为 200\n- height：图片展示大小 height，默认为 200\n- opt：可选参数\n  (opt.bgColor：背景颜色，同 CSS 的 `background-color`)\n\n```bash\n# 库安装\n$npm install funny-console --save\n```\n\n```js\n// 引入库\nrequire('funny-console');\n// 显示图片\nconsole.img('https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/flower.gif', 256, 208);\n```\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/img.gif)\n\n```js\n// 显示图片，加背景颜色\nconsole.img('https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/flower.gif', 256, 208, {\n  bgColor: '#00FF00'\n});\n```\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/img-bg.gif)\n\n\n### 2. 常用输出 `log/warn/error`\n\n- `console.log`: 输出一般信息\n- `console.dir`: 输出一般信息（与 `log` 不同的地方在于，输出的是 DOM 对象时，log 输出的是 html 结构，dir 输出的是对象形式）\n- `console.wran`: 输出警告信息（黄色警告，作为程序员，是对该类信息无视的 ^_^）\n- `console.error`: 输出错误信息（红色警告）\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/log-warn-error.png)\n\n上面几个方法，都可以使用 printf 风格的格式化占位符，支持的占位符如下：\n\n| 占位符 | 功能 |\n| --- | --- |\n| %s | 格式化成字符串输出 |\n| %d 或 %i | 格式化成数值输出 |\n| %f | 格式化成浮点数输出 |\n| %o | 转化成展开的DOM元素输出 |\n| %O | 转化成JavaScript对象输出 |\n| %c | 字符串支持 `CSS` 样式输出 |\n\n```js\nconsole.log('%d年%d月%d日', 2018, 1, 3); // 输出 2018年1月3日\nconsole.log('%d', 3/10); // 输出 0\nconsole.log('%f', 3/10); // 输出 0.3\n```\n\n下面重点研究下 `%c`，以 `console.log` 为例。\n\n```js\nconsole.log('%chello world', 'font-size:16px;color:white;padding: 20px 50px;background-image: -webkit-radial-gradient(hsla(120,70%,60%,.9),hsla(360,60%,60%,.9))');\n```\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/log-hello-world.png)\n\n也可以连着来：\n\n```js\nconsole.log('%chello %cworld', 'color:#696969;', 'color:red;font-size:16px;');\n```\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/log-hello-world-2.png)\n\n有了样式的支持，可以想象有空间就大了，可以随心所欲的把输出弄的五花八门了，下面我们来看看它支持哪些样式吧。\n\n#### 支持的样式\n\n\u003e Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.\n\n从 [文档](https://developer.mozilla.org/en-US/docs/Web/API/Console) 上看到下面这句话，我瞬间奔溃了，好吧，还是得自己一个一个试咯。\n\n结果看这里 [console.log 支持的样式汇总](https://github.com/diamont1001/funny-console/blob/master/docs/css.md)，都是我自己一个一个尝试出来的，不一定全，欢迎贡献 [PR](https://github.com/diamont1001/funny-console/pulls)。\n\n\n### 3. `console.assert`\n\n跟 `console.log` 差不多，只是 `console.assert` 多了个判断，接收至少两个参数，当第一个参数值为 `false` 的时候，它才会输出，输出的是第二个参数，同样的，也支持样式。\n\n```js\nconsole.assert(1===1, 'sb'); // 不会输出\nconsole.assert(1===2, 'sb'); // 断言失败，所以会输出 sb\n```\n\n### 4. `console.count`\n\nconsole.count([label])\n\n输出代码执行到该行的次数，可以通过 `label` 参数来区分计数器。\n\n```js\nconsole.count('label_1'); // label_1: 1\nconsole.count('label_1'); // label_1: 2\nconsole.count('label_1'); // label_1: 3\nconsole.count('label_2'); // label_2: 1\nconsole.count('label_1'); // label_1: 4\nconsole.count('label_2'); // label_2: 2\n```\n\n### 5. 分组输出 `console.group / console.groupEnd / console.groupCollapsed`\n\n把输出的内容产生不同的层级嵌套关系（分组），每一个 `console.group` 会增加一层嵌套，相反要减少一层嵌套可以使用 `console.groupEnd` 方法。\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/group.png)\n\n#### `console.groupCollapsed`\n\n`console.groupCollapsed` 跟 `console.group` 差不多，只是该方法输出的时候会默认折叠，在一些数据量大的情况下，可使用该方法输出，以至版面不会太长造成干扰。\n\n\n### 6. `console.table`\n\n这是个有逼格的输出，会把输出的对象以表格的形式输出。\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/table.png)\n\n\n### 7. `console.time / console.timeEnd`\n\n- `console.time(name)`: 计时开始\n- `console.timeEnd(name)`: 计时结束并输出计时时间\n\n精度为 `ms` 级别（注意不是 1ms，具体要看浏览器的实现）\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/time.png)\n\n\n### 8. `console.profile / console.profileEnd`\n\n性能分析所用，利用该方法我们可以很方便地通过 Profiles 面板看到需要监控的代码的运行性能。\n\n但是，据我了解，这个东东在 Chrome 58 版本之后就用不了了，具体看「[这里](https://bugs.chromium.org/p/chromium/issues/detail?id=675734)」，至于是 BUG 还是故意的，就不知道了。\n\n反正从 58 版本开始，profile 面板也更名为 memory，而增加了 performence 面板，可以通过这个面板工具来调试更多的性能相关的东西。\n具体可以参考：[Chrome DevTools: JavaScript CPU Profiling in Chrome 58](https://developers.google.com/web/updates/2016/12/devtools-javascript-cpu-profile-migration)\n\n\n### 9. `console.trace`\n\n调用堆栈跟踪调试，具体看下面效果。\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/trace.png)\n\n\n### 10. `monitor` 和 `unmonitor`\n\n`monitor` 可以监控指定函数的被调用情况。\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/monitor.png)\n\n\n### 11. 清屏：`console.clear`\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/clear.png)\n\n\n## 控制台其他有趣介绍\n\n除了上面介绍的一些命令以外，其实控制台还提供了很多好玩的东西，为页面开发调试提供了极大的方便。\n\n| 命令 | 功能 |\n| --- | --- |\n| $ | document.querySelector，相当于在控制台中，原生支持了 jQuery 的选择器 |\n| $$ | document.querySelectorAll |\n| $_ | 上一个表达式的值 |\n| $0 - $4 | 最近 5 个 Elements 面板选中的 DOM 元素（$0 为最近一个） |\n| copy | 将在控制台获取到的内容复制到剪贴板，比如 `copy(document.body)` |\n| dir | console.dir 的缩写 |\n| keys | 对象的键名列表, 返回以键名为元素组成的数组 |\n| values | 对象的值列表, 返回对象所有值组成的数组 |\n\n\n### 1. `$`、`$$` 和 `$_`\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/query.png)\n\n\n### 2. `copy`\n\n将在控制台获取到的内容复制到剪贴板。\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/copy.png)\n\n\n### 3. `keys` 和 `values`\n\n`keys` 和 `values` 可以快速输出对象的「键」和「值」。\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/keys-values.png)\n\n\n## 线上栗子\n\n最后来个彩弹，这个网站 [http://jovilab.sinaapp.com/](http://jovilab.sinaapp.com/) 的命令行，是使用 `console.log` 做的一个「2048」小游戏，在 Dev-Tools 里玩游戏，你试过吗，哈哈！\n\n![](https://raw.githubusercontent.com/diamont1001/funny-console/master/docs/imgs/2048.png)\n\n\n## 附录\n\n- [https://developer.mozilla.org/en-US/docs/Web/API/console](https://developer.mozilla.org/en-US/docs/Web/API/console)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiamont1001%2Ffunny-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiamont1001%2Ffunny-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiamont1001%2Ffunny-console/lists"}