chrome dev console result and puppeteer result is different

when i was scrapping innerHTML using puppeteer, first test using chrome dev console

document.querySelector("div#c_food_tab1 div#mCSB_4_container").innerHTML;

is return good result so copy & paste this code to my src and run code

result is Error

(node:4895) UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property ‘innerHTML’ of null

so i decided to fix my code that HTML element select all course of target

const profRestaurant = await page.evaluate( () => document.querySelector("div#c_food_tab1 div#mCSB_5 div#mCSB_5_container") .innerHTML );

then code is working

i wondering about why their(chrome dev console, puppeteer) return different result

[vsemozhetbyt]

The layout and DOM structure of the page depends on the viewport size. When you test on the common browser, the viewport is wide and the page has "div#c_food_tab1 div#mCSB_4_container" selector. Puppeteer sets an initial viewport size to 800px x 600px, so with puppeteer script the viewport is narrow and the page has "div#c_food_tab1 div#mCSB_5 div#mCSB_5_container" instead of "div#c_food_tab1 div#mCSB_4_container". If you add this line in your first script, it will work properly (you can set any other wide size):

  await page.setViewport({ width: 1280, height: 720 });
  await page.goto("https://portal.dankook.ac.kr/web/portal");

[Manngold]

@vsemozhetbyt Oh, viewport! wonderful thanks to your help!