{"id":13549148,"url":"https://github.com/amasad/debug_utils","last_synced_at":"2025-04-05T01:09:36.301Z","repository":{"id":14833197,"uuid":"17556026","full_name":"amasad/debug_utils","owner":"amasad","description":"Advanced JavaScript Debugging Utility Library","archived":false,"fork":false,"pushed_at":"2015-09-26T17:31:12.000Z","size":438,"stargazers_count":640,"open_issues_count":6,"forks_count":37,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-29T00:12:00.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/amasad.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":"2014-03-09T02:21:44.000Z","updated_at":"2024-12-15T13:11:44.000Z","dependencies_parsed_at":"2022-09-23T23:32:25.924Z","dependency_job_id":null,"html_url":"https://github.com/amasad/debug_utils","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasad%2Fdebug_utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasad%2Fdebug_utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasad%2Fdebug_utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasad%2Fdebug_utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amasad","download_url":"https://codeload.github.com/amasad/debug_utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271532,"owners_count":20911587,"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","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-08-01T12:01:18.777Z","updated_at":"2025-04-05T01:09:36.281Z","avatar_url":"https://github.com/amasad.png","language":"JavaScript","readme":"Debug Utils ![](http://i.imgur.com/C4GDJ9O.png)\n-----------\n\nLog and break on:\n\n* Object property access\n* Custom JavaScript and DOM events\n* Method calls\n* Callbacks\n\n## Install\n\n### Chrome extension\n\nThe easiest way to install is to grab the [chrome extension](https://chrome.google.com/webstore/detail/djailkkojeahmihdpcelmmobkpepmkcl) which will add the\nutility functions (described below) to your JavaScript console.\n\n### Script Tag\n\nGrab `du.js` and add it in script tag to your page, which will make all the\nthe functions (described below) available globally.\n\n### Node.js\n\nI haven't put much consideration into how will this work in node but I use it\nfor running the tests so it should probably work.\n\n```\n$ npm install debug_utils\n```\n\n```js\nvar du = require('debug_utils');\ndu.$duv(object, 'foo');\n// Make the functions available globally.\ndu.global();\n$duv(object, 'bar');\n```\n\n## Naming\n\nI tried to name the functions so that they're memorable and easy to type. Here\nare the rules that I followed for naming:\n\n* All functions start with `$du` to avoid conflicts.\n* Somewhat pronounceable to enable profits via word-of-mouth marketing.\n* After `$du` there comes a single letter to hint at the functionality we are\ndebugging. e.g. `$duv`, v for events.\n* `l` at the end of the function means 'log'. e.g. `$duvl`, log events.\n* `r` at the end of the function name means 'remove'.\n\n\n## Event Debugging\n\nAs the complexity of a system grows, evented programming can make it very hard\nto debug. The following utilities should help you:\n\n### $duv(object, event)\n\nAttach an event handler that starts debugger when triggered.\n\nUsesful for:\n\n* Making sure the event is being triggered.\n* Stepping through other event handlers.\n* Finding out what triggered the event.\n\n### $duvl(object, event)\n\nAttach an event handler that logs its arguments when fired.\n\nUsesful for:\n\n* Making sure the event is being fired with the correct args.\n\n### $duvr(object, event)\n\nRemove previously set debug event handler.\n\n## Debugging Property Access\n\nOften times you find that some object is changing from under your feet. And you\nneed to find out what is changing that object. These are utilities for you:\n\n### $dug(object, property)\n\nDebug when something tries to get at a `property` of an `object`.\n\nUseful for:\n\n* Knowing which parts of the code is using your object.\n* Tracking the value over calls and time.\n\n### $dugl(object, property)\n\nLike `$dug` but adds logging instead of `debugger`.\n\n### $dugr(object, property)\n\nRemoves getters set by `$dugl` and `$dug`.\n\n### $dus(object, property)\n\nDebug when something tries to set a `property` on an `object`.\n\nUseful for:\n\n* Knowing which parts of the code is mutating yo shit.\n* Tracking values set over time.\n\n### $dusl(object, property)\n\nLike `$dus` but adds logging instead of `debugger`.\n\n### $dusr(object, property)\n\nRemoves setters set by `$dus` or `$dusl`.\n\n### $dugs(object, property)\n\nDebug both getter and setter. It's like calling `$dug` and `$dus` on an object.\n\n### $dugsl(object, property)\n\nLike `$dugs` but adds logging instead.\n\n### $dugsr(object, property)\n\nRemoves getters and setters set by `$dugs` and `$dugsl`.\n\n## Method debugging\n\nThe JavaScript command line API provides really nice utilities for debugging\nfunctions:\n\n* `monitor`|`unmonitor`: logs function calls.\n* `debug`|`undebug`: adds a breakpoint on the first line of the function.\n\nHowever, they don't work for native methods. The following should help:\n\n### $dum(object, method)\n\nWraps an object's method with a wrapper function with a `debugger` statement.\n\nUseful for:\n\n* Debugging native methods: `$dum(Event.prototype, 'preventDefault')`\n\n### $duml(object, method)\n\nLike `$dum` but logs arguments instead.\n\n### $dumr(object, method)\n\nRemoves debug or log wrappers added by `$dum` or `$duml`.\n\n## Debugging Callbacks\n\nFor APIs taking callbacks, it's really useful to be able to drop in a\nlogger or a debugger statement. The following functions are shorter to type out:\n\n### $dudebug\n\nA function with a debugger statement.\n\n```js\nxhr.onreadystatechange = $dudebug;\n```\n\nUseful for:\n\n* Making sure callbacks are being called.\n* Breaking on callback.\n\np.s. no pun intended.\n\n### $dulog\n\nSimilar to `$dudebug` but logs it's arguments instead of breaking.\n\n### $dulogm(message)\n\nWhen called returns a function that logs it's arguments prefixed with `message`.\n\n```js\nxhr.onreadystatechange = $dulogm('xhr readystate change');\n```\n\n## License\n\nMIT  \nCopyright (c) 2014 Amjad Masad \u003camjad.masad@gmail.com\u003e\n","funding_links":[],"categories":["JavaScript","开发工具和库"],"sub_categories":["调试、性能与安全"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famasad%2Fdebug_utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famasad%2Fdebug_utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famasad%2Fdebug_utils/lists"}