2022-10-14 13:27:31 +00:00
<!doctype html>
2023-06-13 12:34:26 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper docs-doc-page docs-version-20.7.0 plugin-docs plugin-id-default docs-doc-id-guides/debugging" >
2022-10-14 13:27:31 +00:00
< head >
< meta charset = "UTF-8" >
2023-03-29 09:48:59 +00:00
< meta name = "generator" content = "Docusaurus v2.4.0" >
2023-01-11 15:09:01 +00:00
< title data-rh = "true" > Debugging | Puppeteer< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://pptr.dev/guides/debugging" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docsearch:counter" content = "2" > < meta data-rh = "true" property = "og:title" content = "Debugging | Puppeteer" > < meta data-rh = "true" name = "description" content = "Debugging with Puppeteer can be an arduous task. There is no single method for" > < meta data-rh = "true" property = "og:description" content = "Debugging with Puppeteer can be an arduous task. There is no single method for" > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://pptr.dev/guides/debugging" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/guides/debugging" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/guides/debugging" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://DVKY664LG7-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "search" type = "application/opensearchdescription+xml" title = "Puppeteer" href = "/opensearch.xml" >
2023-05-02 17:06:13 +00:00
< script src = "/fix-location.js" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.a9d1367f.css" >
2023-06-13 12:34:26 +00:00
< link rel = "preload" href = "/assets/js/runtime~main.9dc268c0.js" as = "script" >
< link rel = "preload" href = "/assets/js/main.9b005c26.js" as = "script" >
2022-10-14 13:27:31 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2023-03-29 09:48:59 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { var t = null ; try { t = new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } return t } ( ) || function ( ) { var t = null ; try { t = localStorage . getItem ( "theme" ) } catch ( t ) { } return t } ( ) ; t ( null !== e ? e : "light" ) } ( ) < / script > < div id = "__docusaurus" >
2023-06-13 12:34:26 +00:00
< div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_fXgn" href = "#docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/" > < div class = "navbar__logo" > < img src = "https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt = "Puppeteer Logo" class = "themedImage_ToTc themedImage--light_HNdA" > < img src = "https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt = "Puppeteer Logo" class = "themedImage_ToTc themedImage--dark_i4oU" > < / div > < b class = "navbar__title text--truncate" > Puppeteer< / b > < / a > < a aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/" > Docs< / a > < a class = "navbar__item navbar__link" href = "/api/puppeteer.puppeteernode" > Puppeteer API< / a > < a class = "navbar__item navbar__link" href = "/browsers-api/" > @puppeteer/browsers API< / a > < / div > < div class = "navbar__items navbar__items--right" > < div class = "navbar__item dropdown dropdown--hoverable dropdown--right" > < a class = "navbar__link" aria-haspopup = "true" aria-expanded = "false" role = "button" href = "/" > 20.7.0< / a > < ul class = "dropdown__menu" > < li > < a class = "dropdown__link" href = "/next/guides/debugging" > Next< / a > < / li > < li > < a aria-current = "page" class = "dropdown__link dropdown__link--active" href = "/guides/debugging" > 20.7.0< / a > < / li > < li > < hr class = "dropdown-separator" > < / li > < li class = "dropdown-archived-versions" > < b > Archived versions< / b > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v20.6.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 20.6.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v20.5.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 20.5.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v20.4.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 20.4.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v20.3.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 20.3.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v20.2.1/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 20.2.1< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v20.2.0/docs/ap
2022-10-21 14:20:31 +00:00
debugging all possible issues since Puppeteer touches many distinct components
of a browser such as network requests and Web APIs. On a high note, Puppeteer
provides < em > several< / em > methods for debugging which hopefully does cover all possible
2023-02-23 12:41:31 +00:00
issues.< / p > < h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "background" > Background< a href = "#background" class = "hash-link" aria-label = "Direct link to Background" title = "Direct link to Background" > < / a > < / h2 > < p > In general, there are two possible sources of an issue: Code running on Node.js
2022-10-21 14:20:31 +00:00
(which we call < em > server code< / em > ), and
2023-03-06 14:07:22 +00:00
< a href = "/api/puppeteer.page.evaluate" > code running in the browser< / a >
2022-10-21 14:20:31 +00:00
(which we call < em > client code< / em > ). There is also a third possible source being the
browser itself (which we call < em > internal code< / em > ), but if you suspect this is the
source < strong > after attempting the methods below< / strong > , we suggest
< a href = "https://github.com/puppeteer/puppeteer/issues" target = "_blank" rel = "noopener noreferrer" > searching existing issues< / a >
before
2023-02-23 12:41:31 +00:00
< a href = "https://github.com/puppeteer/puppeteer/issues/new/choose" target = "_blank" rel = "noopener noreferrer" > filing an issue< / a > .< / p > < h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "debugging-methods-for-all-situations" > Debugging methods for all situations< a href = "#debugging-methods-for-all-situations" class = "hash-link" aria-label = "Direct link to Debugging methods for all situations" title = "Direct link to Debugging methods for all situations" > < / a > < / h2 > < p > These methods can be used to debug any situation. These should be used as a
2023-03-29 11:30:21 +00:00
quick sanity check before diving into more complex methods.< / p > < h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "turn-off-headless" > Turn off < a href = "/api/puppeteer.browserlaunchargumentoptions" > < code > headless< / code > < / a > < a href = "#turn-off-headless" class = "hash-link" aria-label = "Direct link to turn-off-headless" title = "Direct link to turn-off-headless" > < / a > < / h3 > < p > Sometimes it' s useful to see what the browser is displaying. Instead of
2022-10-21 14:20:31 +00:00
launching in
2023-03-29 11:30:21 +00:00
< a href = "/api/puppeteer.browserlaunchargumentoptions" > < code > headless< / code > < / a > mode,
2022-10-28 07:23:25 +00:00
launch a full version of the browser with
2023-03-29 11:30:21 +00:00
< a href = "/api/puppeteer.browserlaunchargumentoptions" > < code > headless< / code > < / a > set to
< code > false< / code > :< / p > < div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > browser < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > puppeteer< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > launch< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > headless< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" style = "color:#36acaa" > false< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div > < h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "puppeteer-slow-mo" > Puppeteer " slow-mo" < a href = "#puppeteer-slow-mo" class = "hash-link" aria-label = "Direct link to Puppeteer "slow-mo"" title = "Direct link to Puppeteer "slow-mo"" > < / a > < / h3 > < p > The < a href = "/api/puppeteer.browserconnectoptions" > < code > slowMo< / code > < / a > option slows down
2022-10-28 07:23:25 +00:00
Puppeteer operations by a specified amount of milliseconds. It' s another way to
2023-02-23 12:41:31 +00:00
help see what' s going on.< / p > < div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > browser < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > puppeteer< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > launch< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > headless< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" style = "color:#36acaa" > false< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > slowMo< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:#36acaa" > 250< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // slow down by 250ms< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div > < h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "debugging-methods-for-client-code" > Debugging methods for client code< a href = "#debugging-methods-for-client-code" class = "hash-link" aria-label = "Direct link to Debugging methods for client code" title = "Direct link to Debugging methods for client code" > < / a > < / h2 > < h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "capture-console-output" > Capture < code > console.*< / code > output< a href = "#capture-console-output" class = "hash-link" aria-label = "Direct link to capture-console-output" title = "Direct link to capture-console-output" > < / a > < / h3 > < p > Since client code runs in the browser, doing < code > console.*< / code > in client code will not
2022-10-28 07:23:25 +00:00
directly log to Node.js. However, you can < a href = "/api/puppeteer.page.on" > listen< / a > for
2023-03-29 11:30:21 +00:00
the < a href = "/api/puppeteer.pageeventobject" > < code > console< / code > < / a > event which returns a
payload with the logged text.< / p > < div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > on< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' console' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > msg < / span > < span class = "token operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token builtin" > console< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > log< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' PAGE LOG:' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > msg< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > text< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > evaluate< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token builtin" > console< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > log< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token template-string template-punctuation string" style = "color:#e3116c" > `< / span > < span class = "token template-string string" style = "color:#e3116c" > url is < / span > < span class = "token template-string interpolation interpolation-punctuation punctuation" style = "color:#393A34" > ${< / span > < span class = "token template-string interpolation" > location< / span > < span class = "token template-string interpolation punctuation" style = "color:#393A34" > .< / span > < span class = "token template-string interpolation" > href< / span > < span class = "token template-string interpolation interpolation-punctuation punctuation" style = "color:#393A34" > }< / span > < span class = "token template-string template-punctuation string" style = "color:#e3116c" > `< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5
2022-10-28 07:23:25 +00:00
< code > true< / code > when launching Puppeteer:< / p > < div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > browser < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > puppeteer< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > launch< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > devtools< / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" style = "color:#36acaa" > true< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div > < / li > < li > < p > Add < code > debugger< / code > inside any client code you want debugged. For example,< / p > < div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > evaluate< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > debugger< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div > < p > The Browser will now stop in the location the < code > debugger
2023-02-23 12:41:31 +00:00
debug mode.< / p > < / li > < / ol > < h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "debugging-methods-for-server-code" > Debugging methods for server code< a href = "#debugging-methods-for-server-code" class = "hash-link" aria-label = "Direct link to Debugging methods for server code" title = "Direct link to Debugging methods for server code" > < / a > < / h2 > < h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "use-the-debugger-in-nodejs-chromechromium-only" > Use the debugger in Node.js (Chrome/Chromium-only)< a href = "#use-the-debugger-in-nodejs-chromechromium-only" class = "hash-link" aria-label = "Direct link to Use the debugger in Node.js (Chrome/Chromium-only)" title = "Direct link to Use the debugger in Node.js (Chrome/Chromium-only)" > < / a > < / h3 > < p > Since server code intermingles with client code, this method of debugging is
2022-10-21 14:20:31 +00:00
closely tied with the browser. For example, you can step over
< code > await page.click()< / code > in the server script and see the click happen in the
browser.< / p > < p > Note that you won' t be able to run < code > await page.click()< / code > in DevTools console due
to this
< a href = "https://bugs.chromium.org/p/chromium/issues/detail?id=833928" target = "_blank" rel = "noopener noreferrer" > Chromium bug< / a > , so
2023-03-29 11:30:21 +00:00
if you want to try something out, you have to add it to your test file.< / p > < ol > < li > < p > Set < a href = "/api/puppeteer.browserlaunchargumentoptions" > < code > headless< / code > < / a > to
2023-05-02 17:06:13 +00:00
< code > false< / code > .< / p > < / li > < li > < p > Add < code > debugger< / code > to any server code you want debugged. For example,< / p > < div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > debugger< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > click< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' a[target=_blank]' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div > < / li > < li > < p > Run your server code with < code > --inspect-brk< / code > . For example,< / p > < div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token function" style = "color:#d73a49" > node< / span > < span class = "token plain" > --inspect-brk path/to/script.js< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg class = "copyButtonIcon_y97N" viewBox = "0 0 24 24" > < path d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg class = "copyButtonSuccessIcon_LjdS" viewBox = "0 0 24 24" > < path d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div > < / li > < li > < p > In the opened Chrome/Chromium browser, open < code > chrome://inspect/#devices< / code > and
2022-10-21 14:20:31 +00:00
click < code > inspect< / code > .< / p > < / li > < li > < p > In the newly opened test browser, press < code > F8< / code > to resume test execution.< / p > < / li > < li > < p > Now your < code > debugger< / code > statement will be hit and you can debug in the test
2023-02-23 12:41:31 +00:00
browser.< / p > < / li > < / ol > < h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "log-devtools-protocol-traffic" > Log DevTools protocol traffic< a href = "#log-devtools-protocol-traffic" class = "hash-link" aria-label = "Direct link to Log DevTools protocol traffic" title = "Direct link to Log DevTools protocol traffic" > < / a > < / h3 > < p > If all else fails, it' s possible there may be an issue between Puppeteer and the
2022-10-21 14:20:31 +00:00
DevTools protocol. You can debug this by setting the < code > DEBUG< / code > environment
variable before running your script. This will log internal traffic via
2023-05-02 17:06:13 +00:00
< a href = "https://github.com/visionmedia/debug" target = "_blank" rel = "noopener noreferrer" > < code > debug< / code > < / a > under the < code > puppeteer< / code > namespace.< / p > < div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token comment" style = "color:#999988;font-style:italic" > # Basic verbose logging< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > env< / span > < span class = "token plain" > < / span > < span class = "token assign-left variable" style = "color:#36acaa" > DEBUG< / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token string" style = "color:#e3116c" > " puppeteer:*" < / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > node< / span > < span class = "token plain" > script.js< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > # Prevent truncating of long messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > env< / span > < span class = "token plain" > < / span > < span class = "token assign-left variable" style = "color:#36acaa" > DEBUG< / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token string" style = "color:#e3116c" > " puppeteer:*" < / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > env< / span > < span class = "token plain" > < / span > < span class = "token assign-left variable" style = "color:#36acaa" > DEBUG_MAX_STRING_LENGTH< / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > null < / span > < span class = "token function" style = "color:#d73a49" > node< / span > < span class = "token plain" > script.js< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > # Protocol traffic can be rather noisy. This example filters out all Network domain messages< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > env< / span > < span class = "token plain" > < / span > < span class = "token assign-left variable" style = "color:#36acaa" > DEBUG< / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token string" style = "color:#e3116c" > " puppeteer:*" < / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > env< / span > < span class = "token plain" > < / span > < span class = "token assign-left variable" style = "color:#36acaa" > DEBUG_COLORS< / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > true < / span > < span class = "token function" style = "color:#d73a49" > node< / span > < span class = "token plain" > script.js < / span > < span class = "token operator file-descriptor important" style = "color:#393A34" > 2< / span > < span class = "token operator" style = "color:#393A34" > > < / span > < span class = "token file-descriptor important" > & 1< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > |< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > grep< / span > < span class = "token plain" > -v < / span > < span class = "token string" style = "color:#e3116c" > ' " Network' < / span > < br > < / span > < / code > < /pre
2023-06-13 12:34:26 +00:00
< script src = "/assets/js/runtime~main.9dc268c0.js" > < / script >
< script src = "/assets/js/main.9b005c26.js" > < / script >
2022-10-14 13:27:31 +00:00
< / body >
< / html >
