Show DevTools in production

[mparker11]

I can't even begin to explain what happened. I've run a lot of builds with this project (awesome project by the way) with no issues. Then, one time I run npm run build and it builds fine but when I run the app, there functions that don't run, or don't seem to run, as expected. I don't get any feedback for functions I know should run on click. However, my dev (npm start) is fine. There are no errors and I'm able to see exactly what I want.

FYI: I'm running a png sequence. I have a function that iterates over preloaded images, setting a removed state to each previous image.

Any idea what might be happening here? I know my main.js file is 1.44MB, which is high. I have a lot of images in the project. Here are my logs. I truly don't understand what's happening. Thank you in advance.

Also, any way we can use the Chrome Dev Tools while running the .exe? I would love to see if something is going wrong in production but it seems like I can't.

> npm-run-all build-css build-js

> ad_ces@0.1.0 build-css C:\Users\deon7\Documents\projects\personal\ad_ces
> node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/

Rendering Complete, saving .css file...
Wrote CSS to C:\Users\deon7\Documents\projects\personal\ad_ces\src\components\defaults.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\deon7\Documents\projects\personal\ad_ces\src\components\Menu\Menu.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\deon7\Documents\projects\personal\ad_ces\src\containers\App\App.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\deon7\Documents\projects\personal\ad_ces\src\containers\Automotive\Automotive.css
Rendering Complete, saving .css file...
Wrote CSS to C:\Users\deon7\Documents\projects\personal\ad_ces\src\containers\Home\Home.css
Wrote 5 CSS files to C:\Users\deon7\Documents\projects\personal\ad_ces\src\

> ad_ces@0.1.0 build-js C:\Users\deon7\Documents\projects\personal\ad_ces
> nw-react-scripts build

Creating an optimized production build...
Compiled with warnings.

./src/containers/Automotive/index.js
  Line 431:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

./src/containers/App/App.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\deon7\Documents\projects\personal\ad_ces\src\containers\App\App.css:194:9: Gradient has outdated
direction syntax. New syntax is like `to left` instead of `right`.

./src/containers/App/App.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\deon7\Documents\projects\personal\ad_ces\src\containers\App\App.css:279:11: Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`.

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  1.44 MB  build\static\js\main.583b40b8.js
  3.16 KB  build\static\css\main.95e8315e.css

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

(node:24328) DeprecationWarning: Archiver.bulk() deprecated since 0.21.0

[mparker11]

I'm starting to place alerts everywhere and I've narrowed it down to this part of the function:

//if the animation is more than 30fps
if (Date.now() - this.carLastFrame > this.frameTime) { 
    //here i'm moving to the next image and removing (using state) the previous image
} else {
    requestAnimationFrame(() => {
        this.callBackgroundSequence(numOfSteps, index, type);
    });
}

In my production build, the if statement is run twice, then becomes false, sending it to the else clause. At that point the app stops. However, on dev, I am able to run the whole animation with no issues. If I could simply get some idea of how to view dev tools or logging on production, I would be a happy camper. The alerts only took me so far.

[mparker11]

I finally got somewhere on this. I ran npm run eject thinking that I could fine some setting that I wasn't aware of, and I was right. In the scripts/build.js file, I changed line 88 which is options.flavor = 'normal';. The new line is options.flavor = 'sdk'; What this does is allow for the Chrome DevTools to be available and voila!...I see that I have an error in production that never showed during development.