{"id":19723999,"url":"https://github.com/wraith13/evil-timer.js","last_synced_at":"2026-06-16T07:31:07.378Z","repository":{"id":83857411,"uuid":"458452503","full_name":"wraith13/evil-timer.js","owner":"wraith13","description":"evil-timer.js is an auxiliary script for debugging and tuning CSS.","archived":false,"fork":false,"pushed_at":"2025-06-21T09:22:48.000Z","size":256,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-21T10:27:25.726Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wraith13.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE_1_0.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-02-12T07:30:25.000Z","updated_at":"2025-06-21T09:22:51.000Z","dependencies_parsed_at":"2025-02-27T18:58:24.573Z","dependency_job_id":"2c8a7a2d-6d8c-4b65-804d-916a500579cf","html_url":"https://github.com/wraith13/evil-timer.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wraith13/evil-timer.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fevil-timer.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fevil-timer.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fevil-timer.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fevil-timer.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wraith13","download_url":"https://codeload.github.com/wraith13/evil-timer.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wraith13%2Fevil-timer.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34394370,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-16T02:00:06.860Z","response_time":126,"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":[],"created_at":"2024-11-11T23:24:11.439Z","updated_at":"2026-06-16T07:31:07.362Z","avatar_url":"https://github.com/wraith13.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# evil-timer.js\n\nevil-timer.js は**あなた自身の責任**において利用できる JavaScript の デバッグや CSS 調整の為の補助的なスクリプトです。\n\n- [🇬🇧 English README](./README.md)\n\n## 組み込み方\n\nHTMLの `head` タグ内で次のような記述を行ってください。( JavaScript ファイルをコピーして中身を直接 HTML ファイルに埋め込んでも構いません。 )\n\n```html\n\u003cscript src=\"https://wraith13.github.io/evil-timer.js/index.js\"\u003e\u003c/script\u003e\n```\n\n`Date`, `setTimeout`, `setInterval`, `window.requestAnimationFrame` を使用する前に読み込ませる必要があります。\n\n## 使い方\n\n`?evil-timer={\"speed\":100}` のような URL 引数で時間をコントールしたり、 Web ブラウザのコンソールから EvilTimer.* のコマンドを呼び出して使います。\n\n`setTimeout`, `setInterval` に対して後から影響を及ぼす事はできないので、時間のスピードをコントロールしたい場合は URL 引数での指定を推奨します。\n\n## URL 引数について\n\n第三者による悪意あるリンクが作成/拡散されるの防ぐ為、 default では URL 引数は無効になっています。\n\n一度、Web ブラウザでアクセスして JavaScript コンソールから次のコマンドを実行することで URL 引数による指定が有効になります。\n\n```js\nEvilTimer.debugOn();\n```\n\nHTML内で次のように設定しておくと初めから URL 引数が利用できますが、第三者による悪意あるリンクの作成/拡散ができてしまうので、ローカル環境 or クローズド環境でのテスト時以外でこれをやる事は推奨できません。 ( ちなみにこの形で `debug` を `false` に指定しておくと、 `EvilTimer.debugOn()` を実行しても HTML が読み込まれる度にデバッグモードがオフになる為、 URL 引数の利用を禁止できます。 )\n\n```html\n\u003cscript\u003e\nconst evilTimerConfig =\n{\n    debug: true,\n};\n\u003c/script\u003e\n\u003cscript src=\"https://wraith13.github.io/evil-timer.js/index.js\"\u003e\u003c/script\u003e\n```\n\n## コマンド\n\n以下のコマンドを Web ブラウザの JavaScript コンソールから使用できます。\n\n### EvilTimer.set()\n\n#### 定義\n\n```typescript\nmodule EvilTimer\n{\n    ...\n    export type StyleReplaceModeType = \"auto\" | \"disabled\" | \"embedded\" | \"rules\";\n    ...\n    export type EvilTimerConfigType =\n    {\n        disabled?: boolean;\n        debug?: boolean;\n        disabledLoadMessage?: boolean;\n        date?: \"evil\" | \"vanilla\" | boolean | Date | number | string;\n        speed?: number;\n        pause?: boolean;\n        styleReplaceMode?: StyleReplaceModeType;\n    };\n    export const set = (config: EvilTimerConfigType | boolean) =\u003e { ... };\n    ...\n}\n```\n\n#### Web ブラウザの JavaScript コンソールで\n\n```javascript\nEvilTimer.set(false); // Disable EvilTimer\nEvilTimer.set(true); // Enable EvilTimer\nEvilTimer.set({ disabled: true, }); // Same EvilTimer.set(false);\nEvilTimer.set({ disabled: false, }); // Same EvilTimer.set(true);\nEvilTimer.set({ debug: true, }); // Same EvilTimer.debugOn();\nEvilTimer.set({ debug: false, }); // Same EvilTimer.debugOff();\nEvilTimer.set({ disabledLoadMessage: true, }); // Actually, this usage doesn't make sense because it is after the message is output.\nEvilTimer.set({ date: new Date(2022,1,22,22,22,22), });\nEvilTimer.set({ date: \"2022-02-22T22:22:22\", });\nEvilTimer.set({ date: 1645536142000, });\nEvilTimer.set({ date: \"evil\", }); // Same EvilTimer.setDateMode(\"evil\");\nEvilTimer.set({ date: \"vanilla\", }); // Same EvilTimer.setDateMode(\"vanilla\");\nEvilTimer.set({ date: true, }); // Same EvilTimer.setDateMode(\"evil\");\nEvilTimer.set({ date: false, }); // Same EvilTimer.setDateMode(\"vanilla\");\nEvilTimer.set({ speed: 100, });\nEvilTimer.set({ pause: true, });\nEvilTimer.set({ pause: false, });\nEvilTimer.set({ styleReplaceMode: \"auto\", });\nEvilTimer.set({ styleReplaceMode: \"disabled\", });\nEvilTimer.set({ styleReplaceMode: \"embedded\", });\nEvilTimer.set({ styleReplaceMode: \"rules\", });\nEvilTimer.set({ date: \"2022-02-22T22:22:22\", speed: 100, styleReplaceMode: \"auto\", });\n```\n\n#### HTML で\n\n```html\n\u003cscript\u003e\nconst evilTimerConfig = false; // Disable EvilTimer\n\u003c/script\u003e\n\u003cscript src=\"https://wraith13.github.io/evil-timer.js/index.js\"\u003e\u003c/script\u003e\n```\n```html\n\u003cscript\u003e\nconst evilTimerConfig =\n{\n    speed: 100,\n};\n\u003c/script\u003e\n\u003cscript src=\"https://wraith13.github.io/evil-timer.js/index.js\"\u003e\u003c/script\u003e\n```\n```html\n\u003cscript\u003e\nconst evilTimerConfig =\n{\n    disabledLoadMessage: true,\n    date: \"2022-02-22T22:22:22\",\n    styleReplaceMode: \"auto\",\n};\n\u003c/script\u003e\n\u003cscript src=\"https://wraith13.github.io/evil-timer.js/index.js\"\u003e\u003c/script\u003e\n```\n\n#### URL で\n\nWeb ブラウザの JavaScript コンソールで `EvilTimer.set` の引数と同じデータを URL の `evil-timer` 引数として利用できます。ここでの引数は JSON として有効である必要な事に注意してください。( 🚫 `...?evil-timer={speed:100,}` → ✅ `...?evil-timer={\"speed\":100}` )\n\n```url\nhttps://example.com/your-page-path?evil-timer=false\n```\n\n```url\nhttps://example.com/your-page-path?evil-timer={\"speed\":100}\n```\n\n```url\nhttps://example.com/your-page-path?evil-timer={\"disabledLoadMessage\":true,\"date\":\"2022-02-22T22:22:22\",\"styleReplaceMode\":\"auto\"}\n```\n\n### EvilTimer.setDateMode()\n\ndefault: \"evil\"\n\n```javascript\nEvilTimer.setDateMode(\"evil\"); // Date is EvilDate\nEvilTimer.setDateMode(\"vanilla\"); // Date is vanilla Date\n```\n\nDate クラスの実装を切り替えます。 ```EvilTimer.setDateMode(\"vanilla\");``` でシステムオリジナルの Date クラスが使用され、```EvilTimer.setDateMode(\"evil\");``` で evil-timer.js のカスタム Date クラスが使用されます。通常、この設定を切り替える必要はありません。**代替 vanilla オブジェクト** を参照してください。\n\n### EvilTimer.setDate()\n\n```javascript\nEvilTimer.setDate(new Date(2022,1,22,22,22,22));\nEvilTimer.setDate(\"2022-02-22T22:22:22\");\nEvilTimer.setDate(1645536142000);\nEvilTimer.setDate(true); // Same EvilTimer.setDateMode(\"evil\");\nEvilTimer.setDate(false); // Same EvilTimer.setDateMode(\"vanilla\");\n```\n\n`new Date()` で返される現在日時を設定します。 `puase` 状態でなければ `speed` に応じて自動的に時間は経過します。\n\n### EvilTimer.resetDate()\n\n```javascript\nEvilTimer.resetDate();\n```\n\n`new Date()` で返される現在日時をシステム時刻で設定します。 `puase` 状態でなければ `speed` に応じて自動的に時間は経過します。\n\n### EvilTimer.pause()\n\n```javascript\nEvilTimer.pause();\n```\n\n`setTimeout` タスク と `setInterval` タスク と `Date` を止めます。 ( JavaScript のコードは動作しますが、時間が停止した状態になります。 )\n\n### EvilTimer.unpause()\n\n```javascript\nEvilTimer.unpause();\n```\n\n`setTimeout` タスク と `setInterval` タスク と `Date` の停止状態を解除します。 ( `EvilTimer.pause()` による時間停止状態を解除します。停止していた時間分、 `new Date()` の指し示す時刻は遅れたままになります。 )\n\n### EvilTimer.step()\n\n```javascript\nEvilTimer.step();\nEvilTimer.step(2); // === EvilTimer.step(); EvilTimer.step();\n```\n\n`EvilTimer.pause()` によってサスペンドされてる先頭のタスクを１つ実行し、残りのサスペンドされてるタスクの数を返します。\n\n### EvilTimer.stepAll()\n\n```javascript\nEvilTimer.stepAll();\n```\n\n`EvilTimer.pause()` によってサスペンドされてるタスクを全て実行します。処理中に新たにサスペンドされたタスクは実行しません。\n\n### EvilTimer.stepOut()\n\n```javascript\nEvilTimer.stepOut();\n```\n\n`EvilTimer.pause()` によってサスペンドされてるタスクを全て実行します。処理中に新たにサスペンドされたタスクも実行します。\n\n### EvilTimer.restore()\n\n```javascript\nEvilTimer.restore();\n```\n\n停止状態を解除し、`Date` and `speed` をリセットします。このコマンドを使うより、ページをリロードする事を推奨します。\n\n### EvilTimer.setSpeed()\n\ndefault: 1\n\n```javascript\nEvilTimer.setSpeed(2);\n```\n\n`setTimeout`、`setInterval`、`Date`、CSS(`animation-duration`, `animation-delay`, `transition-duration`, `transition-delay`)のスピードを２倍にします。\n\n```javascript\nEvilTimer.setSpeed(0.5);\n```\n\n`setTimeout`、`setInterval`、`Date`、CSS(`animation-duration`, `animation-delay`, `transition-duration`, `transition-delay`)のスピードを半分にします。\n\n```javascript\nEvilTimer.setSpeed(0);\n```\n\n`EvilTimer.pause()` が呼びされます。\n\n### EvilTimer.setStyleReplaceMode()\n\nこの機能は試験的な機能であり、有効に機能する範囲は限定的です。\n\ndefault: \"disabled\"\n\n|モード|説明|\n|---|---|\n|`auto`|linkタグによるスタイル指定が無い場合に `embedded` 扱いになり、そうでない場合は `rules` 扱いになります。|\n|`disabled`|CSSのスピードコントロールを行いません。|\n|`embedded`|`style` タグで指定されているモノについてのみスピードコントロールを行います。|\n|`rules`|`rules` オブジェクトに対してスピードコントロールを行います。|\n\n```javascript\nEvilTimer.setStyleReplaceMode(\"auto\");\n```\n\n```javascript\nEvilTimer.setStyleReplaceMode(\"disabled\");\n```\n\n```javascript\nEvilTimer.setStyleReplaceMode(\"embedded\");\n```\n\n```javascript\nEvilTimer.setStyleReplaceMode(\"rules\");\n```\n\n### EvilTimer.debugOn()\n\n```javascript\nEvilTimer.debugOn();\n```\n\nデバッグモードをオンします。 ( URL 引数が有効になります。 )\n\n### EvilTimer.debugOff()\n\n```javascript\nEvilTimer.debugOff();\n```\n\nデバッグモードをオフします。 ( URL 引数が無効になります。 )\n\n### EvilTimer.isDebug()\n\n```javascript\nEvilTimer.isDebug();\n```\n\nデバッグモードがオンになっていれば true、そうでなければ false を返します。\n\n### EvilTimer.getStatus()\n\n次のような JSON を返します。\n\n```json\n{\n    \"enabled\": true,\n    \"debug\": false,\n    \"speed\": 1000,\n    \"isPaused\": true,\n    \"susppendedTasksCount\": 2,\n    \"date\":\n    {\n        \"vanilla\":\n        {\n            \"text\": \"2023/5/29 23:54:41\",\n            \"tick\": 1685372081785\n        },\n        \"evil\":\n        {\n            \"text\": \"2023/5/31 16:06:07\",\n            \"tick\": 1685516767640\n        }\n    }\n}\n```\n\n## 代替 vanilla オブジェクト\n\nevil-timer.js は `Date`, `setTimeout`, `setInteral` を独自実装のモノに差し替えます。\n\nオリジナルの `Date`, `setTimeout`, `setInteral` の機能を利用したい場合は以下のものを利用してください。\n\n- `EvilTimer.Vanilla.Date`\n- `EvilTimer.Vanilla.setTimeout`\n- `EvilTimer.Vanilla.setInteral`\n\n## サンプルサイト\n\n- [Clockworks](https://wraith13.github.io/clockworks/) ( 🚧 開発中 )\n- [Cyclic Todo](https://wraith13.github.io/cyclic-todo/) ( 🚧 開発中 )\n\n## ビルド方法\n\n必要なソフトウェア: [Node.js](https://nodejs.org/), [TypeScript Compiler](https://www.npmjs.com/package/typescript)\n\n`tsc -P .` あるいは `tsc -P . -w`\n\n### VS Code の場合\n\nYou can use automatic build. Run `Tasks: Allow Automatic Tasks in Folder` command from command palette ( Mac: \u003ckbd\u003eF1\u003c/kbd\u003e or \u003ckbd\u003eShift\u003c/kbd\u003e+\u003ckbd\u003eCommand\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e, Windows and Linux: \u003ckbd\u003eF1\u003c/kbd\u003e or \u003ckbd\u003eShift\u003c/kbd\u003e+\u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003eP\u003c/kbd\u003e), and restart VS Code.\n\n## ライセンス\n\n[Boost Software License](LICENSE_1_0.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwraith13%2Fevil-timer.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwraith13%2Fevil-timer.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwraith13%2Fevil-timer.js/lists"}