Question about debugging

[spotlesscoder]

Hello, I want to extend the software to be able to scan canned foods etc. with a barcode scanner.

For this, I need to extend the software and want to be able to debug both the client and the server.

I use VS Code as IDE with React Native Tools and 0.5.7 and Debugger for Chrome 4.1.0 extensions.

I can set breakpoints but I don't really know why the breakpoint in FoodAddEditForm.js saveFood() function is hit every time I select a category.

The only reference VS Code finds to this function is in the onClick() handler of the Add/Update button in that form.

On the other hand, when I click "Add", the breakpoint isn't hit. It's very confusing and I don't know how to debug then.

[jspaine]

Hi, I haven't used the debugger in vscode much so I'm not sure. But adding a console.log to the saveFood method shows it's not being called when a category is selected.

It would be nice to have that functionality, how were you thinking to do it?

[spotlesscoder]

well simply adding a new page with 3 buttons:

"register item" (dialog opens, auto focus on barcode number field -> scan -> enter information -> save) "add item to stock" (dialog opens, auto focus on barcode field -> scan -> enter quantity -> save) "take item" (dialog opens, auto focus on barcode field -> scan -> enter quantity -> save)

For my personal use, I'd like to add fields like expiry date etc. so I can get notification when an item is about to expire etc.

But could you try to reproduce my issue please? Maybe I just made a mistake setting up debugging.

[jspaine]

But if the scanner's a react native component how do you put that in a non-native app?

It must be a mistake somehow, but I've no idea how to set up vscode to debug like that. I can look into it later if you're still having problems.

[spotlesscoder]

I simply need a number input field for the barcode. It will be scanned with a regular cheap USB barcode scanner

[jspaine]

Ah, but how do you get the scanner result into the input?

Did you figure out the debugger problem? I can try if you give me a hint how to get it working.

[spotlesscoder]

some barcode scanners simply "type" the scanned number when pressing the button on it. Like you would enter it manually on the keyboard.

I used this tutorial for setting up VS Code for debugging https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

[jspaine]

Oh ok, it sounds a bit clunky to have to click an item, scan, move to the quantity field.

I made a js barcode scanner that works ok on not-mobile that should be able to streamline it a bit (https://github.com/jspaine/zxing.js), or there's this but I haven't tried it. And if you have to be on pc anyway to use the usb scanner maybe it's worth trying?

I think the best experience would be with a native app (and could be fairly easy by just showing the app in a webview with the scanner as a native component) but the way this was meant to be used (each food bank deploys their own copy) would make it difficult since each food bank would also have to build and publish the native apps.

What do you mean 'for your personal use'? Recording expiry date could be tricky since you might have an item from multiple purchases with different expiry dates?

You forgot the tutorial link, have you tried with the chrome debugger?

[spotlesscoder]

It's definitely worth a try.

About the building and publishing of the native app, how about having a Travis CI build for a docker container with the app so nobody has to build the app manually.

For personal use means at home. My idea was that, when registering, I record the expiry date, then the software calculates the timespan until expiration. When I add an item to stock, the expiry date is automatically set to time of scanning + by default. I simply need to check whether this is correct. If not, I want to have the date editable so I can fix the date.

Here is the missing link: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

[spotlesscoder]

I checked out https://github.com/jspaine/zxing.js. Using a mobile phone is a very good idea.

But I want to focus on USB PC Barcode scanners for now. I don't see a big problem a new view in the UI of pantry-for-good for USB Barcode scanning Scanning with thew USB scanners works pretty easy: https://www.youtube.com/watch?v=yssnGacoTNA

My idea of the GUI is the following:

1.) new page:

when pressing the first button (register new item), the following dialog is shown:

Then I can add instances of that items to stock via 2nd button which opens this dialog

Taking an item from stock would look quite similar to the "Add item to stock" dialog. But in that dialog I would suggest that the dialog shows the expiry date of items with that barcode in stock which is closest to current date. That way, the people can use the oldest food items first (they might have to search for it but how long that takes is a matter of organization of the food storage).

Back to the topic: I simply need to understand how to debug the app, why the saveFood function is called when selecting a category, and how the app communicates with mongodb.

[jspaine]

I get the same with the debugger, following this answer works though. Add context to webpack.config.js:

module.exports = {
  context: resolve(__dirname), // add this

And in webpack.config.dev.js change dev-tool from eval to source-map

But if you have several of an item in stock they could have different expiry dates, sounds awkward to keep track of specific ones?

[spotlesscoder]

I will try that.

Well the simplest method would be re-stocking new food from the backside of the shelf and using those on the front side first.

[spotlesscoder]

With the suggested changes, debugging works. Thank you very much!

[spotlesscoder]

I have another question regarding debugging. How can I debug both client and server simultaneously?

[spotlesscoder]

I tried to first lauch the chrome against localhost and then attach to the nodejs process (I selected the last entry shown in the screenshot)

This is my launch.json in .vscode/

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}"
        },
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },

    ]
}

But none of the breakpoints in server/routes/food.js is hit when I add a new food item while the breakpoints in the client are working.

As you can see, both debuggers seem to be running

Trying to attach to one of the other 3 remaining nodejs processes throws an error:

[spotlesscoder]

Ok, another breakpoint is actually hit (e.g. in server/controllers/food.js createItem function)

[jspaine]

Try running the server with the --inspect flag, in gulpfile.js change line 69 to: exec: "node --inspect ./server/index.js"

Then in launch.json add a configuration for Node.Js: Attach

[spotlesscoder]

Thanks a lot!