How i could debug the frontend

[dojbraga]

Hello, I'm trying to debug the files in the angular folder, but I can not, because gulp's tasks do not allow it. Would you help me?

[jadjoubran]

Hi @dojbraga Can you provide more information? It's not clear what you're trying to do

[dojbraga]

Hi @jadjoubran

I am trying to do debugin in files into angular folder, but when i run gulp && gulp watch it's not possible. I would like to know if the correct way to debug is running gulp && gulp whatch or if there is any task to debug with browsesync or outher way.

Example:

export function RoutesRun($rootScope, $state, $transitions, $auth, API, ContextService) {
    'ngInject';

    let requiresAuthCriteria = {
        to: ($state) => $state.data && $state.data.auth
    };

    debugger;

    let redirectToLogin = () => {
        'ngInject';
        if (!$auth.isAuthenticated()) {
            ContextService.clearContext()
            return $state.target('app.login', undefined, { location: false });
        } else {
            ContextService.setContext()
        }
    };

    $transitions.onBefore(requiresAuthCriteria, redirectToLogin, { priority: 10 });

}

[jadjoubran]

Maybe throwing in a debugger; statement?

MDN Docs it works with Chrome dev tools too

[dojbraga]

D:\WEB\laravel\projeto>gulp && gulp watch
[14:30:38] Using gulpfile D:\WEB\laravel\projeto\gulpfile.js
[14:30:39] Starting 'all'...
[14:30:39] Starting 'bower-js'...
[14:30:40] gulp-notify: [Laravel Elixir]
[14:30:40] gulp-notify: [Laravel Elixir]
[14:30:40] Finished 'bower-js' after 1.74 s
[14:30:40] Starting 'bower-css'...
[14:30:41] gulp-notify: [Laravel Elixir]
[14:30:41] gulp-notify: [Laravel Elixir]
[14:30:41] Finished 'bower-css' after 536 ms
[14:30:41] Starting 'copy'...
[14:30:41] Finished 'copy' after 79 ms
[14:30:41] Starting 'copy'...
[14:30:41] Finished 'copy' after 5.32 ms
[14:30:41] Starting 'webpack'...
[14:30:46]
[14:30:46] Finished 'webpack' after 4.93 s
[14:30:46] Starting 'sass'...
[14:30:46] Finished 'sass' after 476 ms
[14:30:46] Starting 'sass'...
[14:30:46] Finished 'sass' after 96 ms
[14:30:46] Starting 'styles'...
[14:30:47] Finished 'styles' after 227 ms
[14:30:47] Starting 'eslint'...

[object Object]
[14:30:48]
D:\WEB\laravel\projeto\angular\run\routes.run.js
  15:13  error  Unexpected console statement  no-console

D:\WEB\laravel\projeto\angular\app\components\app-header\app-header.component.js
  20:13  error  Unexpected console statement          no-console
  21:13  error  Unexpected 'debugger' statement       no-debugger
  26:13  error  '$http' is not defined                no-undef
  26:44  error  'response' is defined but never used  no-unused-vars

✖ 5 problems (5 errors, 0 warnings)

I would like to use a browsersync to code and already check the result in the browser;

[jadjoubran]

Hi @dojbraga Isn't your page running in the browser? It may be because $http is not defined in app-header.component.js

[dojbraga]

I was able to debug! Thank you @jadjoubran