{"id":15098183,"url":"https://github.com/nextfaze/devmod","last_synced_at":"2025-04-15T00:31:35.431Z","repository":{"id":57107969,"uuid":"135090107","full_name":"NextFaze/devmod","owner":"NextFaze","description":"Developer Module for debugging web applications","archived":false,"fork":false,"pushed_at":"2018-11-06T02:38:36.000Z","size":12983,"stargazers_count":17,"open_issues_count":9,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T12:38:03.637Z","etag":null,"topics":["angular","debugging","debugging-tool","debugging-tools","ionic"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NextFaze.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-27T23:55:21.000Z","updated_at":"2023-10-14T19:46:59.000Z","dependencies_parsed_at":"2022-08-20T17:11:24.373Z","dependency_job_id":null,"html_url":"https://github.com/NextFaze/devmod","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NextFaze%2Fdevmod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NextFaze%2Fdevmod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NextFaze%2Fdevmod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NextFaze%2Fdevmod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NextFaze","download_url":"https://codeload.github.com/NextFaze/devmod/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248984273,"owners_count":21193717,"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":["angular","debugging","debugging-tool","debugging-tools","ionic"],"created_at":"2024-09-25T16:44:08.829Z","updated_at":"2025-04-15T00:31:30.420Z","avatar_url":"https://github.com/NextFaze.png","language":"TypeScript","readme":"# DevMod Developer {Mod}ule\n\nDeveloper decorators for deugging your apps.\n\nCurrently supports Angular\n\n[![Build Status](https://travis-ci.org/NextFaze/devmod.svg?branch=master)](https://travis-ci.org/NextFaze/devmod)\n[![Coverage Status](https://coveralls.io/repos/github/NextFaze/devmod/badge.svg?branch=master)](https://coveralls.io/github/NextFaze/devmod?branch=master)\n\n\u003cimg src=\"./docs/demo.gif\" alt=\"Invocation UI for manual entry\" width=\"55%\" align=\"right\"/\u003e\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n* [DevMod Developer {Mod}ule](#devmod-developer-module)\n  * [Features](#features)\n  * [About](#about)\n  * [Installation](#installation)\n    * [Using the Angular CLI schematic (beta):](#install-using-the-angular-cli-schematic-beta)\n    * [Manual installation](#manual-installation)\n      * [Install the dependencies](#install-the-dependencies)\n      * [Setting up your environment](#setting-up-your-environment)\n      * [Enabling debug mode](#enabling-debug-mode)\n      * [Import in the interface module](#import-in-the-interface-module)\n      * [Add in the toggle](#add-in-the-toggle)\n      * [Setting up your Developer Functions](#setting-up-your-developer-functions)\n  * [Demo and Developing](#demo-and-developing)\n  * [Contributing](#contributing)\n    * [Other (Non Angular) Libraries](#other-non-angular-libraries)\n  * [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Features\n\n* Call arbitrary methods on components from a special developer interface\n  * Quickly fill forms with random data using tools like [faker](https://github.com/marak/Faker.js/)\n  * One-click login to development accounts\n* Call methods on your services and providers\n* Hide developer tools in production builds\n* Debug the output of observables\n* Summon the developer tools with a global Floating Action Button or backtick (`) hotkey\n* Change arguments for developer functions on the fly by holding Alt/Option\n\nComing Soon\n\n* Register custom components to render in the list to provide your own extensions\n* Better support for debugging observables\n\nYou can read more detail about the various features in depth:\n\n* [Developer Function](./docs/DEVELOPER_FUNCTION.md)\n* [Developer Category](./docs/DEVELOPER_CATEGORY.md)\n* [Developer Module](./docs/DEVELOPER_MODULE.md)\n* [Devmod Toggle](./docs/DEVMOD_TOGGLE.md)\n* [Devmod List](./docs/DEVMOD_LIST.md)\n* [Debug Observable](./docs/DEBUG_OBSERVABLE.md)\n\n## About\n\nThis project was an attempt to reproduce similar core functionality to the Android developer library [DevFun](https://github.com/NextFaze/dev-fun). The idea being to provide tools to aid in debugging Angular applications in a similar way without overlapping functionality with any of the amazing existing developer tools like Chrome devtools and [Augury](https://augury.angular.io/).\n\nIf you're interested in how the module works you can check out [this Medium article](https://medium.com/@zbarbuto/75a6cb1e9529).\n\n## Installation\n\n### Using the Angular CLI schematic (beta):\n\n1.  `npm i @devmod/schematic`;\n1.  `ng generate @devmod/schematic:devmod-angular`\n1.  `npm install` to install devmod dependencies\n\nThis will create the required `devmod.config.ts` file, add devmod packages to your package.json and update the required module and component files as needed.\n\n### Manual installation\n\n#### Install the dependencies\n\n`npm i --save @devmod/{core,interface}`\n\nThe interface also relies on Angular CDK for the modal so that also needs to be installed if you do not have it (or angular material) already\n\n`npm i --save @angular/cdk`\n\n#### Setting up your environment\n\nIn order for tree shaking to work properly - you will want your `production` argument to be exported as a static boolean rather than part of an object - so update your `environment.prod.ts` file as follows (and others as required)\n\n```ts\nexport const production = true;\nexport const environment = {\n  production\n};\n```\n\n#### Enabling debug mode\n\nCreate a new `devmod.config.ts` file with the following config\n\n```ts\nimport { production } from './environments/environment';\nimport { enableDebugMode } from '@devmod/core';\n\nif (!production) {\n  enableDebugMode(); // Ensures all the decorators do what they should\n}\n```\n\nand update your `main.ts` file as follows:\n\n```ts\nimport './devmod.config'; // Must be first!\n// ... remaining imports\n```\n\n#### Import in the interface module\n\nWe provide a non-functional standin Module when running in production mode. In your `app.module.ts` import both, and select the module to use based on the `production` variable.\n\n```ts\nimport { DevmodInterfaceModule, DevmodNoopModule } from '@devmod/interface';\nimport { production } from '.../environments/environment';\n\nlet devmod = DevmodNoopModule; // Use 'noop' module in production so we don't see devmod toggle\nif (!production) {\n  devmod = DevmodInterfaceModule; // Use real devmod module in development\n}\n```\n\nOnce you have the devmod module ready to go, import it as part of your app bootstrap:\n\n```ts\n@NgModule({\n  declarations: [\n    // app declarations\n  ],\n  imports: [\n    // import Devmod\n    devmod\n    // the rest of your imports\n  ]\n  // the rest of your bootstrap code\n})\nexport class AppModule {}\n```\n\n#### Add in the toggle\n\nThe toggle gives you a Floating Action Button on top of your app.\n\nUpdate your `app.component.html`\n\n```html\n\u003c!-- Your current app.component.html code --\u003e\n\u003cdevmod-toggle\u003e\u003c/devmod-toggle\u003e\n```\n\n#### Setting up your Developer Functions\n\nIn your `app.component.ts` (or any component you like, really)\n\n```ts\nimport { DeveloperFunction } from '@devmod/core';\n\n@Component({\n  templateUrl: './app.component.html',\n  selector: 'app-root'\n})\nexport class AppComponent {\n  @DeveloperFunction()\n  doSomethingCool() {\n    // Let's do something cool!\n  }\n}\n```\n\n_**NOTE**: components will only show in the DevMod list if they are in the DOM_\n\n## Demo and Developing\n\nThis project was scaffolded with the Angular cli. The internal libraries are [generated](https://github.com/angular/angular-cli/wiki/stories-create-library) using the cli.\n\nYou can build the two modules by running `ng build core --prod \u0026\u0026 ng build interface --prod`\n\nYou can then start up the demo app by running `ng serve`\n\n## Contributing\n\nDevMod is intended for developers (though it can be handy for testers). So, if there is anything you want or think should be added then create an issue or PR and more than likely it will be accepted.\n\nAny bugs please report (desirably with reproduction steps) and/or PR/fix them.\n\nFeel free also to submit your own handy util functions or whatever for submission.\n\n### Other (Non Angular) Libraries\n\nAlthough DevMod is mainly geared towards Angular applications - it was built in a way which is (hopefully) able to be extended to any other library by adding the necessary parts. If you are familliar with some other library and want to use the features of DevMod then feel free to make a PR and we'll be more than happy to add it to the main codebase and help you get it up and running.\n\n`ApplicationHandler` would need to be extended to provide an observable of items with Developer Functions on them and a separate interface that could be imported to work with the given framework.\n\n## License\n\n```\nCopyright 2018 NextFaze\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextfaze%2Fdevmod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextfaze%2Fdevmod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextfaze%2Fdevmod/lists"}