How to debug

ionic-v1
1

I’m primarily a python developer, I’ve done some jquery work but am not a frontend expert.
I was planning on using ionic for a personal project. I also have no experience with angular.

I ran the Getting Started app in the browser and in the emulator, so far so good.
Then started to modify it for the project I am working on, and even just renaming items in all the
templates and js files, not changing anything functionally, pretty soon I ended up with a black screen.
The error messages shown in the Chrome console are no help - at least to me. Every bit of the traceback refers to code within the ionic framework not my code. It says that jngular.js is not defined but I did not touch any code that mentions that.

So I thought to set up debugging. Searching for debug or debugging in the docs yields no results. Nothing about it in the Ionic book. Searching for it in the forum yields next to nothing - there’s a reference to an angular debugging plugin but I’m not sure how to get, install or use that. Google yields not much.

Can anybody provide some tips on how you debug a black screen? How do I narrow down where my problem is?

Many thanks

2

I would suggest just running your app with ‘ionic serve’ you can then debug it in the web browser using the inspector.

http://ionicframework.com/docs/guide/testing.html

If you run into problems that you can not reproduce in the web browser, try GapDebug to remote debug a device:

Try GapDebug: https://www.genuitec.com/products/gapdebug/

1 Like
3

I should clarify perhaps I am using “ionic serve” and viewing the result in the web browser and using the inspector, and that is where I see the black screen, the problem is that the inspector gives no useful error messages. All of them refer to internal ionic code and there is no suggestion of where I should look in my code. Here is the traceback:

Uncaught ReferenceError: jngular is not defined
ionic.bundle.js:11531 Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.services due to:
Error: [$injector:nomod] Module ‘starter.services’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.25/$injector/nomod?p0=starter.services
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:9302:17
at ensure (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9226:38)
at module (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9300:14)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11503:22
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11504:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=starter.services&p…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A11497%3A5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11531:15
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11504:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7950:18)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11497:5)
at createInjector (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11437:11)
at doBootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9069:20)
at bootstrap (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9084:12)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=starter&p1=Error%3…%3A%2F%2Flocalhost%3A8100%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A9084%3A12)

4

Looks like you are missing a dependency (or is it misspelled?). Check so the dependency is included in app.js and the javascript file is loaded in your index.html.

5

as @bluemango said check your app.js code, most likely you are missing some dependency or misspelled angular with jngular