[{"data":1,"prerenderedAt":763},["ShallowReactive",2],{"blog-posts":3,"post-\u002Fblog\u002Fwhat-to-put-in-a-bug-report":301},[4,19,31,50,64,79,94,105,117,131,143,153,164,177,186,201,210,222,234,245,256,267,280,289],{"path":5,"title":6,"description":7,"date":8,"modified":8,"draft":9,"locale":10,"category":11,"image":12,"translationKey":12,"tags":13,"readingTime":18},"\u002Fblog\u002Fwebsite-handover-checklist","Website Handover Checklist: 43 Items to Hand Over at Launch (Free Template)","A website handover checklist for agencies and freelancers: accounts, domain, hosting, backups, licenses and support terms, plus a free handover document.","2026-10-29T08:00:00+00:00",false,"en","guides",null,[14,15,16,17],"website handover checklist","website handover document template","website handover process","web agency",12,{"path":20,"title":21,"description":22,"date":23,"modified":23,"draft":9,"locale":10,"category":24,"image":12,"translationKey":12,"tags":25,"readingTime":30},"\u002Fblog\u002Fclaude-code-fix-bugs","How to Use Claude Code to Fix the Bugs Your Clients Report","How to use Claude Code to fix bugs: what it needs from a bug report, how to connect it to client feedback over MCP, and how to review the fix before you resolve it.","2026-10-27T08:00:00+00:00","workflow",[26,27,28,29],"claude code fix bugs","claude code mcp","ai bug fixing","bug report",7,{"path":32,"title":33,"description":34,"date":35,"modified":36,"draft":9,"locale":10,"category":11,"image":37,"translationKey":43,"tags":44,"readingTime":49},"\u002Fblog\u002Fbest-website-feedback-tools","How to Choose a Website Feedback Tool (2026 Checklist)","How to choose the best website feedback tool in 2026: the tool types, 12 criteria, a free scoring template (Excel) and a one-week trial plan with a real client.","2026-10-07T09:00:00+00:00","2026-10-22T10:00:00+00:00",{"src":38,"card":39,"alt":40,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F09\u002Fscreencode_7_Bug_tracker_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F09\u002Fscreencode_7_Bug_tracker_GiveFeedback-400x250.jpg","Code on a screen, illustrating how to choose a website feedback tool",1200,630,"feedback-tools",[45,46,47,48],"best website feedback tool","website feedback tool free","visual website feedback tool","client feedback",8,{"path":51,"title":52,"description":53,"date":35,"modified":36,"draft":9,"locale":10,"category":24,"image":54,"translationKey":59,"tags":60,"readingTime":49},"\u002Fblog\u002Fclient-website-approval","Client Website Approval: How to Get Sign-Off Without Delays","Client website approval made simple: the 5 approval stages, a revision-limit clause, a sign-off email, a free website sign-off form (Word) and a checklist.",{"src":55,"card":56,"alt":57,"width":58,"height":41},"\u002Fwp-content\u002Fuploads\u002F2023\u002F06\u002FAutomating-Project-Management-for-Efficiency-Sized.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F06\u002FAutomating-Project-Management-for-Efficiency-Sized-400x250.jpg","Two people reviewing a printed document with a pen, ready for client website approval",1920,"client-approval",[61,62,63,17],"client approval process","website sign off","revision rounds",{"path":65,"title":66,"description":67,"date":35,"modified":36,"draft":9,"locale":10,"category":11,"image":68,"translationKey":72,"tags":73,"readingTime":78},"\u002Fblog\u002Fhow-to-collect-client-feedback-on-a-website","How to Collect Client Feedback on a Website (Step by Step)","How to collect client feedback on a website: 5 methods compared, a review round step by step, good vs vague feedback examples and a briefing email to send today.",{"src":69,"card":70,"alt":71,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_web_Designer_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_web_Designer_GiveFeedback-400x250.jpg","Web designer at a desk reviewing client feedback on a website","client-feedback",[74,75,76,77],"client feedback on website","website feedback examples","client feedback examples","website review process",9,{"path":80,"title":81,"description":82,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":84,"translationKey":88,"tags":89,"readingTime":30},"\u002Fes\u002Fblog\u002Fanotar-capturas-de-pantalla-web","Cómo anotar capturas de pantalla de una web (Mac, Windows y online)","Cómo anotar capturas de pantalla en Windows, Mac, online o en Chrome, cómo capturar una página web entera y cómo marcar los errores para que se arreglen.","es",{"src":85,"card":86,"alt":87,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_office_colours_pc_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_office_colours_pc_GiveFeedback-400x250.jpg","Persona anotando capturas de pantalla de una web para enviarlas al equipo de desarrollo","screenshot-annotation",[90,91,92,93],"anotar capturas de pantalla","captura de pantalla","anotar captura en Mac","anotar captura en Windows",{"path":95,"title":96,"description":97,"date":35,"modified":36,"draft":9,"locale":83,"category":24,"image":98,"translationKey":59,"tags":100,"readingTime":49},"\u002Fes\u002Fblog\u002Faprobacion-cliente-proyecto-web","Aprobación del cliente en un proyecto web: cómo conseguirla","Aprobación del cliente en un proyecto web: las 5 fases, una cláusula para limitar revisiones, un email de aprobación, un formulario de aprobación gratis y una checklist.",{"src":55,"card":56,"alt":99,"width":58,"height":41},"Dos personas revisan un documento con un bolígrafo antes de la aprobación del cliente en un proyecto web",[101,102,103,104],"aprobación del cliente","rondas de revisión","presupuesto web","agencia web",{"path":106,"title":107,"description":108,"date":35,"modified":36,"draft":9,"locale":83,"category":24,"image":109,"translationKey":111,"tags":112,"readingTime":78},"\u002Fes\u002Fblog\u002Fcapturas-anotadas-en-asana","Capturas anotadas en Asana: cómo llevar el feedback web a tareas","Cómo llevar capturas anotadas y feedback web a Asana: plantilla CSV gratis, cinco métodos comparados y tareas automáticas desde el feedback del cliente.",{"src":38,"card":39,"alt":110,"width":41,"height":42},"Capturas anotadas de una web convertidas en tareas de Asana","asana",[113,114,115,116],"capturas anotadas en Asana","plantilla Asana","gestión de bugs","feedback web",{"path":118,"title":119,"description":120,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":121,"translationKey":125,"tags":126,"readingTime":18},"\u002Fes\u002Fblog\u002Fchecklist-qa-web-antes-de-lanzar","Checklist web: más de 70 comprobaciones antes de lanzar","Checklist web con más de 70 comprobaciones por áreas: formularios, enlaces, móvil, navegadores, velocidad, SEO, accesibilidad y WordPress, con plantilla Excel gratis.",{"src":122,"card":123,"alt":124,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracker_people_pc_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracker_people_pc_GiveFeedback-400x250.jpg","Persona revisando una web con una checklist QA antes del lanzamiento","qa-checklist",[127,128,129,130],"checklist web","checklist QA web","pruebas web","lanzamiento web",{"path":132,"title":133,"description":134,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":135,"translationKey":137,"tags":138,"readingTime":78},"\u002Fes\u002Fblog\u002Fcomo-escribir-un-informe-de-bugs","Plantilla de reporte de errores (bugs): gratis, con ejemplos","Plantilla de reporte de errores gratis en Excel, Google Sheets y Word, con un ejemplo de informe de bugs bueno y uno malo y los campos que importan en una web.",{"src":38,"card":39,"alt":136,"width":41,"height":42},"Código JavaScript en una pantalla, ilustrando cómo escribir un informe de bugs de una web","bug-report",[139,140,141,142],"plantilla de reporte de errores","reporte de errores","informe de bugs","ejemplo de reporte de errores",{"path":144,"title":145,"description":146,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":147,"translationKey":72,"tags":149,"readingTime":78},"\u002Fes\u002Fblog\u002Fcomo-recoger-feedback-de-clientes-en-una-web","Cómo pedir feedback a un cliente sobre su web (paso a paso)","Cómo pedir feedback a un cliente sobre su web: 5 métodos comparados, una ronda de revisión paso a paso, ejemplos de feedback bueno y vago y un email para enviar hoy.",{"src":69,"card":70,"alt":148,"width":41,"height":42},"Diseñador web en su mesa revisando el feedback de clientes sobre una web",[150,151,116,152],"cómo pedir feedback a un cliente","feedback de clientes","revisión de una web",{"path":154,"title":155,"description":156,"date":35,"modified":36,"draft":9,"locale":83,"category":24,"image":157,"translationKey":159,"tags":160,"readingTime":49},"\u002Fes\u002Fblog\u002Ffeedback-web-en-notion","Bugs en Notion: gestiona el feedback de tu web paso a paso","Cómo gestionar bugs en Notion en proyectos web: plantilla gratis, propiedades, vistas tablero, rutina de triaje y cómo recibir el feedback del cliente solo.",{"src":55,"card":56,"alt":158,"width":58,"height":41},"Equipo organizando bugs y feedback de clientes de una web en Notion","notion",[161,162,163,116],"bugs en Notion","plantilla Notion","seguimiento de bugs",{"path":165,"title":166,"description":167,"date":35,"modified":36,"draft":9,"locale":83,"category":168,"image":169,"translationKey":171,"tags":172,"readingTime":78},"\u002Fes\u002Fblog\u002Fherramientas-gratis-seguimiento-bugs","Herramientas gratis de seguimiento de bugs para webs (2026)","Herramientas gratis de seguimiento de bugs para equipos web: los planes gratuitos de Jira, Trello, ClickUp, Notion, Asana, monday.com y Wrike, y una hoja de cálculo gratis.","comparisons",{"src":122,"card":123,"alt":170,"width":41,"height":42},"Equipo revisando incidencias en una herramienta gratis de seguimiento de bugs","free-bug-tracking",[173,174,175,176],"herramientas gratis seguimiento de bugs","bug tracker","gestión de incidencias","hoja de seguimiento de bugs",{"path":178,"title":179,"description":180,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":181,"translationKey":43,"tags":183,"readingTime":78},"\u002Fes\u002Fblog\u002Fmejores-herramientas-feedback-visual-web","Cómo elegir una herramienta de feedback visual para tu web","Cómo elegir entre las herramientas de feedback visual web en 2026: tipos, 12 criterios, una plantilla de evaluación gratis en Excel y una prueba de una semana.",{"src":38,"card":39,"alt":182,"width":41,"height":42},"Código en una pantalla, ilustración de cómo elegir entre herramientas de feedback visual web",[184,116,185,151],"herramientas de feedback visual","feedback visual",{"path":187,"title":188,"description":189,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":190,"translationKey":194,"tags":195,"readingTime":200},"\u002Fes\u002Fblog\u002Fpruebas-de-aceptacion-uat-web","Pruebas de aceptación de usuario (UAT): ejemplos y plantilla","Qué son las pruebas de aceptación de usuario (UAT), diferencias con el QA, ejemplos de escenarios, checklist para webs y plantillas gratis en Excel y Word.",{"src":191,"card":192,"alt":193,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracking_testing-man_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracking_testing-man_GiveFeedback-400x250.jpg","Cliente haciendo pruebas de aceptación UAT de su nueva web frente al ordenador","uat",[196,197,198,199],"pruebas de aceptación","pruebas de aceptación de usuario","plan de pruebas de aceptación","ejemplo pruebas de aceptación",10,{"path":202,"title":203,"description":204,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":205,"translationKey":207,"tags":208,"readingTime":49},"\u002Fes\u002Fblog\u002Fque-es-el-feedback-visual","Qué es el feedback visual y por qué agiliza tus proyectos web","Qué es el feedback visual: comentarios sobre la propia web con capturas marcadas, vídeo o notas. Tipos, ventajas, ejemplos y qué pedirle a una herramienta.",{"src":69,"card":70,"alt":206,"width":41,"height":42},"Diseñador web revisando el feedback visual sobre una interfaz","visual-feedback",[185,116,209,151],"capturas anotadas",{"path":211,"title":212,"description":213,"date":214,"modified":36,"draft":9,"locale":10,"category":24,"image":215,"translationKey":159,"tags":217,"readingTime":49},"\u002Fblog\u002Fsupercharge-your-workflow-with-the-notion-bug-tracker-extension","Notion Bug Tracker Template (Free) for Website Projects","Free Notion bug tracker template for website projects: import the CSV, set up the properties and board views, and send client feedback into Notion.","2025-04-24T16:17:44+00:00",{"src":55,"card":56,"alt":216,"width":58,"height":41},"Team organizing website bugs and client feedback in a Notion bug tracker",[218,219,220,221],"notion bug tracker template","notion issue tracker template","bug tracking","website feedback",{"path":223,"title":224,"description":225,"date":226,"modified":36,"draft":9,"locale":10,"category":11,"image":227,"translationKey":194,"tags":229,"readingTime":78},"\u002Fblog\u002Fuser-acceptance-testing-in-software-development","User Acceptance Testing (UAT): Template, Checklist & Examples","What user acceptance testing is, UAT vs QA, test scenario examples, a UAT checklist for websites and free templates: Excel test plan and Word sign-off form.","2023-09-28T17:32:27+00:00",{"src":191,"card":192,"alt":228,"width":41,"height":42},"Client doing user acceptance testing on a new website at his desk",[230,231,232,233],"user acceptance testing","UAT testing","user acceptance testing template","user acceptance testing checklist for website",{"path":235,"title":236,"description":237,"date":238,"modified":36,"draft":9,"locale":10,"category":168,"image":239,"translationKey":171,"tags":241,"readingTime":78},"\u002Fblog\u002Fbug-tracking-tools-free","Free Bug Tracking Tools for Web Teams (2026 Comparison)","Free bug tracking tools compared for web teams: the free plans of Jira, Trello, ClickUp, Notion, Asana, monday.com and Wrike, plus a free bug tracking spreadsheet.","2023-09-21T16:56:47+00:00",{"src":122,"card":123,"alt":240,"width":41,"height":42},"Team at a computer reviewing issues in a free bug tracking tool",[242,174,243,244],"free bug tracking tools","bug tracking spreadsheet","issue tracking",{"path":246,"title":247,"description":248,"date":249,"modified":36,"draft":9,"locale":10,"category":11,"image":250,"translationKey":137,"tags":252,"readingTime":49},"\u002Fblog\u002Fwhat-to-put-in-a-bug-report","Bug Report Template (Free Excel, Word & Google Sheets) + Examples","Free bug report template for Excel, Google Sheets and Word, with a good and a bad bug report example and the fields that matter for website bugs.","2023-09-11T14:43:18+00:00",{"src":38,"card":39,"alt":251,"width":41,"height":42},"JavaScript code on a screen, illustrating how to write a bug report for a website",[253,254,255,243],"bug report template","bug report example","how to write a bug report",{"path":257,"title":258,"description":259,"date":260,"modified":36,"draft":9,"locale":10,"category":24,"image":261,"translationKey":111,"tags":263,"readingTime":49},"\u002Fblog\u002F1-way-to-get-annotated-screengrabs-into-asana","Asana Bug Tracking: Free Template and Annotated Screenshots","Asana bug tracking for website projects: a free CSV template, five ways to get annotated screenshots into tasks, and automatic tasks from client feedback.","2023-09-11T11:56:04+00:00",{"src":38,"card":39,"alt":262,"width":41,"height":42},"Annotated screenshots of a website being turned into Asana tasks",[264,265,266,221],"asana bug tracking","asana bug tracking template","annotated screenshots",{"path":268,"title":269,"description":270,"date":271,"modified":36,"draft":9,"locale":10,"category":11,"image":272,"translationKey":125,"tags":274,"readingTime":279},"\u002Fblog\u002Fspeed-up-qa-testing","Website QA Checklist: 70+ Checks Before Launch (Free Template)","A website QA checklist with 70+ checks by area (forms, links, devices, browsers, speed, SEO, accessibility, WordPress), plus a free Excel and Google Sheets template.","2023-08-19T11:32:36+00:00",{"src":122,"card":123,"alt":273,"width":41,"height":42},"Person running a website QA checklist on a laptop before launch",[275,276,277,278],"website QA checklist","website testing checklist","website qa checklist template excel","wordpress website testing checklist",11,{"path":281,"title":282,"description":283,"date":284,"modified":36,"draft":9,"locale":10,"category":11,"image":285,"translationKey":207,"tags":287,"readingTime":49},"\u002Fblog\u002Fvisual-feedback-faster-bug-testing","What Is Visual Feedback? A Guide for Web Teams","What is visual feedback? Feedback given on the website itself with marked-up screenshots, video or pinned comments. Types, examples and a tool checklist.","2023-08-09T17:41:00+00:00",{"src":69,"card":70,"alt":286,"width":41,"height":42},"Web designer reviewing visual feedback on a website interface",[288,47,266,221],"visual feedback",{"path":290,"title":291,"description":292,"date":293,"modified":36,"draft":9,"locale":10,"category":11,"image":294,"translationKey":88,"tags":296,"readingTime":30},"\u002Fblog\u002Fscreen-grab-annotation-apps","How to Annotate a Screenshot of a Website (Mac, Windows & Online)","How to annotate a screenshot on Mac, Windows, online or in Chrome, how to capture a full web page, and how to mark up website screenshots so developers fix them.","2023-08-02T23:25:13+00:00",{"src":85,"card":86,"alt":295,"width":41,"height":42},"Person at a computer annotating website screenshots for a developer",[297,298,299,300],"annotate screenshot","annotate screenshot mac","annotate screenshot windows","annotate screenshot online",{"id":302,"title":247,"body":303,"category":11,"date":249,"description":248,"draft":9,"extension":738,"faq":739,"image":754,"locale":10,"meta":755,"modified":36,"navigation":756,"path":246,"readingTime":49,"seo":757,"seoTitle":758,"stem":759,"tags":760,"tldr":761,"translationKey":137,"__hash__":762},"blog\u002Fblog\u002Fwhat-to-put-in-a-bug-report.md",{"type":304,"value":305,"toc":728},"minimark",[306,310,316,321,324,327,331,334,472,475,510,519,523,526,550,567,571,574,579,590,593,598,604,607,611,614,620,624,627,640,644,647,655,658,665,697,704,717,725],[307,308,309],"p",{},"A bug report template is the fastest way to get website bugs fixed on the first try. A developer who receives \"the form doesn't work\" has to ask four questions before starting; one who receives a URL, a browser version, three steps and a marked-up screenshot can usually reproduce the problem in minutes. The free template here works in Excel, Google Sheets and Word, and the examples further down show the difference between a report that gets fixed and one that gets sent back.",[311,312],"template-download",{"files":313,"text":314,"title":315},"Excel|\u002Ftemplates\u002Fbug-report-template.xlsx,Word|\u002Ftemplates\u002Fbug-report-template.docx,CSV|\u002Ftemplates\u002Fbug-report-template.csv","Excel with severity, priority and status dropdowns and two filled-in examples (opens in Google Sheets: File > Import), plus Word and CSV versions.","Free bug report template",[317,318,320],"h2",{"id":319},"what-is-a-bug-report","What is a bug report?",[307,322,323],{},"A bug report is a written description of a software problem that gives a developer enough information to reproduce it, understand it and fix it. For a website, that means where the problem happens, on which device and browser, how to trigger it and what should have happened instead. A good one can be acted on without a single follow-up question.",[307,325,326],{},"A bug report is not a complaint and not a feature request. \"I'd like the menu to be green\" is a change request. \"The menu doesn't open on iPhone\" is a bug. Keeping the two apart matters, because change requests usually need a budget conversation and bugs don't.",[317,328,330],{"id":329},"what-should-a-bug-report-include","What should a bug report include?",[307,332,333],{},"Ten fields cover it: a specific title, the page URL, the browser and version, the operating system, the screen size or device, numbered steps to reproduce, the expected result, the actual result, a marked-up screenshot and a severity or priority. The first five tell the developer where to look; the rest tell them what to do.",[335,336,337,353],"table",{},[338,339,340],"thead",{},[341,342,343,347,350],"tr",{},[344,345,346],"th",{},"Field",[344,348,349],{},"What to write",[344,351,352],{},"Example",[354,355,356,368,384,395,406,417,428,439,450,461],"tbody",{},[341,357,358,362,365],{},[359,360,361],"td",{},"Title",[359,363,364],{},"Where + what, in a few words",[359,366,367],{},"\"Contact form: Send button does nothing on mobile\"",[341,369,370,373,376],{},[359,371,372],{},"URL",[359,374,375],{},"The exact page address",[359,377,378],{},[379,380,381],"a",{"href":381,"rel":382},"https:\u002F\u002Fexample.com\u002Fcontact\u002F",[383],"nofollow",[341,385,386,389,392],{},[359,387,388],{},"Browser and version",[359,390,391],{},"Name and version number",[359,393,394],{},"Safari 17.5",[341,396,397,400,403],{},[359,398,399],{},"Operating system",[359,401,402],{},"Name and version",[359,404,405],{},"iOS 17.5",[341,407,408,411,414],{},[359,409,410],{},"Screen size or device",[359,412,413],{},"Resolution or device model",[359,415,416],{},"iPhone 13, 390x844",[341,418,419,422,425],{},[359,420,421],{},"Steps to reproduce",[359,423,424],{},"Numbered, starting from loading the page",[359,426,427],{},"1. Open the URL 2. Fill in all fields 3. Tap Send",[341,429,430,433,436],{},[359,431,432],{},"Expected result",[359,434,435],{},"What should happen",[359,437,438],{},"The form is sent and a thank-you message appears",[341,440,441,444,447],{},[359,442,443],{},"Actual result",[359,445,446],{},"What happens instead",[359,448,449],{},"Nothing happens; the button stays active",[341,451,452,455,458],{},[359,453,454],{},"Screenshot or video",[359,456,457],{},"The problem, marked up",[359,459,460],{},"An arrow pointing at the button",[341,462,463,466,469],{},[359,464,465],{},"Severity or priority",[359,467,468],{},"Impact and urgency",[359,470,471],{},"High: no leads can come in from mobile",[307,473,474],{},"Why each one earns its place:",[476,477,478,486,492,498,504],"ul",{},[479,480,481,485],"li",{},[482,483,484],"strong",{},"URL:"," \"the services page\" can mean three different pages on a site with several languages, or with a staging and a live version. Copy the address bar.",[479,487,488,491],{},[482,489,490],{},"Browser, OS and screen size:"," many website bugs only happen in one browser or at one width. Without them, the developer tests on their own setup, sees nothing wrong and closes the report as \"cannot reproduce\".",[479,493,494,497],{},[482,495,496],{},"Steps to reproduce:"," a screenshot proves the bug exists; the steps show how to make it happen again. Start from a fresh page load and number every action.",[479,499,500,503],{},[482,501,502],{},"Expected vs actual result:"," this is what turns \"it doesn't work\" into something testable, and it sometimes shows that the request is really a change.",[479,505,506,509],{},[482,507,508],{},"Screenshot:"," a marked-up screenshot removes any doubt about which element you mean. Draw an arrow or a box on the exact spot.",[307,511,512,513,518],{},"Optional but useful: whether it happens every time or only sometimes, whether you were logged in and with which role, the browser language, and console errors if you can open the developer tools (Chrome explains how in its ",[379,514,517],{"href":515,"rel":516},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fconsole",[383],"Console overview",").",[317,520,522],{"id":521},"how-do-you-write-a-bug-report-step-by-step","How do you write a bug report, step by step?",[307,524,525],{},"Reproduce the bug once, write down the exact steps from a fresh page load, note what you expected and what happened, record your browser, system and screen size, take a screenshot and mark the problem, and only then write the title. Report one bug at a time and check the list for duplicates before adding yours.",[527,528,529,532,535,538,541,544,547],"ol",{},[479,530,531],{},"Reproduce it. If you can't make it happen again, say so (\"happened once, couldn't reproduce\") rather than guessing.",[479,533,534],{},"Write the steps, numbered from loading the page, one action per line.",[479,536,537],{},"State the expected and the actual result in two short sentences, without a diagnosis.",[479,539,540],{},"Note the browser and version, the operating system and the device or window size.",[479,542,543],{},"Take a screenshot and put an arrow or a box on the problem.",[479,545,546],{},"Write the title last: the place plus the problem, in about ten words.",[479,548,549],{},"Search the tracker for duplicates before adding a new report.",[307,551,552,553,556,557,560,561,566],{},"Two habits make a big difference. ",[482,554,555],{},"Describe, don't diagnose:"," \"the hero image is blurry\" is better than \"the image compression is wrong\", because the cause is the developer's job. ",[482,558,559],{},"Say where it doesn't happen:"," \"on desktop Chrome the same steps work\" is one of the most useful clues you can give. Mozilla's ",[379,562,565],{"href":563,"rel":564},"https:\u002F\u002Fbugzilla.mozilla.org\u002Fpage.cgi?id=bug-writing.html",[383],"bug writing guidelines"," make the same points for software in general.",[317,568,570],{"id":569},"what-does-a-good-bug-report-look-like","What does a good bug report look like?",[307,572,573],{},"It names the page and the problem in its title, lists the exact URL and setup, gives numbered steps that anyone can follow, separates the expected from the actual result and points at the problem in a screenshot. A bad one says that something is broken and leaves the developer to find out what, where and on which device.",[307,575,576],{},[482,577,578],{},"Bad example:",[580,581,587],"pre",{"className":582,"code":584,"language":585,"meta":586},[583],"language-text","Title: Form broken\n\nThe contact form isn't working, please fix ASAP!!\n","text","",[588,589,584],"code",{"__ignoreMap":586},[307,591,592],{},"The developer doesn't know which form (the site has two), on what device, what \"not working\" means, or whether it's urgent compared with everything else.",[307,594,595],{},[482,596,597],{},"Good example:",[580,599,602],{"className":600,"code":601,"language":585,"meta":586},[583],"Title: Contact form: Send button does nothing on iPhone (Safari)\n\nURL: https:\u002F\u002Fstaging.example.com\u002Fcontact\u002F\nBrowser and version: Safari 17.5\nOperating system and version: iOS 17.5\nDevice \u002F screen size: iPhone 13, 390x844\nLogged in? No\n\nSteps to reproduce:\n1. Open https:\u002F\u002Fstaging.example.com\u002Fcontact\u002F on the iPhone\n2. Fill in Name, Email and Message with valid data\n3. Tap \"Send\"\n\nExpected result:\nThe form is submitted and the message \"Thanks, we'll be in touch\" appears.\n\nActual result:\nNothing happens. No message, no error, the fields keep their content.\nOn desktop Chrome 129 (Windows 11) the same steps work.\n\nHappens: every time (tried 3 times)\nSeverity: high (mobile visitors can't contact the client)\nScreenshot: attached, Send button circled in red\n",[588,603,601],{"__ignoreMap":586},[307,605,606],{},"The good report takes about two minutes longer to write and saves far more than that in back-and-forth.",[317,608,610],{"id":609},"bug-report-template-to-copy-and-paste","Bug report template to copy and paste",[307,612,613],{},"Paste this into an email, a document, a Notion page or the tracker you use. It has the same fields as the downloadable template above.",[580,615,618],{"className":616,"code":617,"language":585,"meta":586},[583],"Title: [Page\u002Ffeature]: [what goes wrong], [where\u002Fwhen]\n\nURL:\nBrowser and version:\nOperating system and version:\nDevice \u002F screen size:\nLogged in? (yes\u002Fno, which role):\n\nSteps to reproduce:\n1.\n2.\n3.\n\nExpected result:\n\nActual result:\n\nHappens: [every time \u002F sometimes \u002F once]\nSeverity: [critical \u002F high \u002F medium \u002F low]\nScreenshot or recording: [attach, with the problem marked]\nNotes:\n",[588,619,617],{"__ignoreMap":586},[317,621,623],{"id":622},"can-you-track-bugs-in-a-spreadsheet","Can you track bugs in a spreadsheet?",[307,625,626],{},"Yes. For a single website project or a small team, a spreadsheet works well as a bug tracker: one row per bug, with columns for the report fields, a severity, a priority, an owner and a status. The Excel template above is built that way, with dropdowns for severity, priority and status, and it works the same in Google Sheets.",[307,628,629,630,635,636,639],{},"To open it in Google Sheets, use File, then Import, then Upload (",[379,631,634],{"href":632,"rel":633},"https:\u002F\u002Fsupport.google.com\u002Fdocs\u002Fanswer\u002F40608",[383],"Google's instructions","), and share the sheet with the people who fix and test. A spreadsheet starts to hurt when several projects run at once, when you need to attach many screenshots, or when people need notifications and a history of who changed what. That's the point to move to a real tracker; our guide to ",[379,637,242],{"href":638},"\u002Fblog\u002Fbug-tracking-tools-free\u002F"," compares the free plans.",[317,641,643],{"id":642},"how-do-you-get-complete-bug-reports-into-jira-trello-or-another-tracker","How do you get complete bug reports into Jira, Trello or another tracker?",[307,645,646],{},"The most reliable way is to stop retyping them. If clients and testers report through a visual feedback widget on the site, each report arrives with the screenshot, the URL and the browser details already filled in, and it can be created automatically in the tracker your team uses, so nobody copies emails into tickets.",[307,648,649,650,654],{},"Even with a template, non-technical people rarely know their browser version or screen resolution, and copying URLs and marking up screenshots by hand takes time. That's when you get \"form broken\", especially from clients reviewing a site during a ",[379,651,653],{"href":652},"\u002Fblog\u002Fhow-to-collect-client-feedback-on-a-website\u002F","client feedback round",". The fix is to capture the technical fields automatically, so the reporter only writes what a person has to write: the steps, the expected result and the actual result.",[656,657],"blog-cta",{},[307,659,660,664],{},[379,661,663],{"href":662},"\u002F","GiveFeedback.io"," adds a \"Give Feedback\" button to your website with one JavaScript snippet. When someone clicks it (no account needed), the screenshot is taken (on a computer, after the browser asks permission to capture the tab), and they mark up a screenshot of the visible page with arrows, boxes, text, a pen or a highlighter, then add a title, a description and a type such as Bug. These template fields are attached automatically to every report:",[476,666,667,673,679,685,691],{},[479,668,669,672],{},[482,670,671],{},"Page URL:"," the exact address, including staging subdomains.",[479,674,675,678],{},[482,676,677],{},"Browser and system:"," browser and version, operating system and version.",[479,680,681,684],{},[482,682,683],{},"Screen:"," the screen resolution.",[479,686,687,690],{},[482,688,689],{},"Locale:"," browser language and time zone.",[479,692,693,696],{},[482,694,695],{},"Console:"," the page's recent console messages, errors and failed requests.",[307,698,699],{},[700,701],"img",{"alt":702,"src":703},"A feedback report in GiveFeedback.io showing the screenshot and the browser data captured automatically","\u002Fwp-content\u002Fuploads\u002F2024\u002F01\u002Fbrowser-1920-1080-1-task-info.jpg",[307,705,706,707,711,712,716],{},"Reports land in a dashboard where you mark them open, resolved or archived, and each one can be created automatically as an issue in ",[379,708,710],{"href":709},"\u002Fjira-bug-tracking-tool\u002F","Jira",", a card in ",[379,713,715],{"href":714},"\u002Ftrello-bug-tracking-tool\u002F","Trello",", a task in ClickUp, Asana or Wrike, an item in monday.com, a page in Notion, a message in Slack or Discord, or an email to your team. On paid plans, the status stays in sync both ways with Jira, Trello, ClickUp, Asana, monday.com, Wrike, Slack and Discord.",[307,718,719,720,724],{},"The Free plan covers 5 projects and 50 feedback reports; see ",[379,721,723],{"href":722},"\u002Fpricing\u002F","pricing"," for the rest.",[307,726,727],{},"Whether you use a tool or the template, the rule doesn't change: one bug per report, the exact URL and setup, numbered steps, and the expected versus the actual result. Get those four right and most bugs are fixed the first time someone looks at them.",{"title":586,"searchDepth":729,"depth":729,"links":730},2,[731,732,733,734,735,736,737],{"id":319,"depth":729,"text":320},{"id":329,"depth":729,"text":330},{"id":521,"depth":729,"text":522},{"id":569,"depth":729,"text":570},{"id":609,"depth":729,"text":610},{"id":622,"depth":729,"text":623},{"id":642,"depth":729,"text":643},"md",[740,742,745,748,751],{"question":330,"answer":741},"A specific title, the page URL, the environment (browser and version, operating system, screen size), numbered steps to reproduce, the expected result, the actual result and a marked-up screenshot. Add how often it happens and a severity, so the team can decide what to fix first. Anything a developer would otherwise have to ask belongs in the report.",{"question":743,"answer":744},"What is the difference between expected and actual result?","The expected result is what should happen if the site worked correctly; the actual result is what happens instead. Writing both turns a vague complaint into something testable, and it sometimes shows that the site is working as designed and the request is really a change, not a bug.",{"question":746,"answer":747},"Can I use the bug report template in Google Sheets?","Yes. Download the Excel file and open it in Google Sheets with File, then Import, then Upload. The columns, the two example rows and the severity, priority and status dropdowns are kept, so the sheet works as a shared bug log for the whole team.",{"question":749,"answer":750},"How do I write a good bug report title?","Name the place and the problem in about ten words, for example \"Checkout: Pay button does nothing on Safari iOS\". Leave the title for last: once the steps are written, it is easier to make it specific. Avoid titles like \"Bug\", \"Urgent\" or \"Site broken\", which say nothing to whoever triages the list.",{"question":752,"answer":753},"Should I report several bugs in one report?","No. Write one report per bug, even when they are on the same page. Separate reports can be assigned to different people, fixed in any order and closed independently, so nothing gets lost when one problem is fixed and the other is not.",{"src":38,"card":39,"alt":251,"width":41,"height":42},{},true,{"title":247,"description":248},"Bug Report Template: Free Excel, Word & Example","blog\u002Fwhat-to-put-in-a-bug-report",[253,254,255,243],"A bug report template is a fill-in form that makes every report include the same facts: where the bug happens (URL), on what setup (browser, OS, screen size), numbered steps to reproduce it, the expected and the actual result, and a marked-up screenshot. One bug per report, with a short title that names the place and the problem.","PCfq8eHwlUXeZT0JIkkRTEL4XSuQNAzLxrbhwyVgf2o",1793371018488]