{"componentChunkName":"component---src-templates-modal-page-js","path":"/apollo-client-devtools","result":{"pageContext":{"node":{"slug":{"current":"apollo-client-devtools"},"name":"Apollo Client Devtools","githubUrl":"https://github.com/apollographql/apollo-client-devtools","description":"Browser extension for GraphQL API inspecting.","developer":{"name":"Apollo","url":"https://www.apollographql.com/","logo":{"asset":{"url":"https://cdn.sanity.io/images/g5bd2nk6/production/43fb6368c26c3d3dd21078c3245cc5ada3cbb3be-300x300.png"}}},"price":"Free","url":null,"tags":[],"logo":{"asset":{"url":"https://cdn.sanity.io/images/g5bd2nk6/production/80ee839dc73f02b57ab43be5583630b278483acb-2500x2430.svg"}},"categories":[{"name":"Utilities","slug":{"current":"utilities"}}],"_rawContent":[{"_key":"1b053073048c","_type":"block","children":[{"_key":"1b053073048c0","_type":"span","marks":[],"text":"Features"}],"markDefs":[],"style":"h1"},{"_key":"ee1f0aa304fb","_type":"block","children":[{"_key":"ee1f0aa304fb0","_type":"span","marks":[],"text":"The devtools appear as an \"Apollo\" tab in your Chrome inspector, along side the \"Elements\" and \"Console\" tabs. There are currently 3 main features of the devtools:"}],"markDefs":[],"style":"normal"},{"_key":"104f8adfa81c","_type":"block","children":[{"_key":"104f8adfa81c0","_type":"span","marks":[],"text":"GraphiQL: Send queries to your server through the Apollo network interface, or query the Apollo cache to see what data is loaded."}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"5277f023f5a0","_type":"block","children":[{"_key":"5277f023f5a00","_type":"span","marks":[],"text":"Normalized store inspector: Visualize your GraphQL store the way Apollo Client sees it, and search by field names or values."}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"222089a335a9","_type":"block","children":[{"_key":"222089a335a90","_type":"span","marks":[],"text":"Watched query inspector: View active queries and variables, and locate the associated UI components."}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"b7f5253279b8","_type":"block","children":[{"_key":"b7f5253279b80","_type":"span","marks":[],"text":"Make requests against either your app’s GraphQL server or the Apollo Client cache through the Chrome developer console. This version of GraphiQL leverages your app’s network interface, so there’s no configuration necessary — it automatically passes along the proper HTTP headers, etc. the same way your Apollo Client app does."}],"markDefs":[],"style":"normal"},{"_key":"84fa0356379a","_type":"block","children":[{"_key":"84fa0356379a0","_type":"span","marks":[],"text":"View the state of your client-side cache as a tree and inspect every object inside. Visualize the mental model of the Apollo cache. Search for specific keys and values in the store and see the path to those keys highlighted."}],"markDefs":[],"style":"normal"},{"_key":"f0caaafbbec0","_type":"block","children":[{"_key":"f0caaafbbec00","_type":"span","marks":[],"text":"View the queries being actively watched on any given page. See when they're loading, what variables they're using, and, if you’re using React, which React component they’re attached to. Angular support coming soon."}],"markDefs":[],"style":"normal"}]},"targetPath":"","modalType":"tool"}},"staticQueryHashes":[]}