{"id":18675871,"url":"https://github.com/kubrianity/chrome-dev-tools-tricks","last_synced_at":"2026-02-04T04:35:49.086Z","repository":{"id":115491462,"uuid":"509203566","full_name":"Kubrianity/chrome-dev-tools-tricks","owner":"Kubrianity","description":"14 Must Know Dev Tools Tricks","archived":false,"fork":false,"pushed_at":"2022-07-11T12:01:32.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"root","last_synced_at":"2025-05-18T12:35:42.776Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kubrianity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-30T19:11:43.000Z","updated_at":"2022-06-30T19:38:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"493d3523-7e48-4a63-94ab-62abc6279242","html_url":"https://github.com/Kubrianity/chrome-dev-tools-tricks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kubrianity/chrome-dev-tools-tricks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kubrianity%2Fchrome-dev-tools-tricks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kubrianity%2Fchrome-dev-tools-tricks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kubrianity%2Fchrome-dev-tools-tricks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kubrianity%2Fchrome-dev-tools-tricks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kubrianity","download_url":"https://codeload.github.com/Kubrianity/chrome-dev-tools-tricks/tar.gz/refs/heads/root","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kubrianity%2Fchrome-dev-tools-tricks/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263154247,"owners_count":23422008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T09:26:44.678Z","updated_at":"2026-02-04T04:35:44.058Z","avatar_url":"https://github.com/Kubrianity.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript 30 #9: chrome-dev-tools-tricks\nThis is the ninth practice of JavaScript30 Challenge. \u003c/br\u003e\u003c/br\u003e\nThis practice shows some features of developer tools and console methods. \u003c/br\u003e\u003c/br\u003e\n## Usage \u0026 Features\n- Interpolation\n```\nconsole.log(\"Hello, I am a %s!\", \"world\")\n```\n- Styling\n```\n console.log(\"%c I am some great text\", \"font-size:25px; color:red\");\n```\n- Warning\n```\nconsole.warn(\"OH NOOO!!!\")\n```\n- Error\n```\nconsole.error(\"Oops, error!\")\n```\n- Info\n```\n console.info(\"Octopuses have three hearts\")\n```\n- Testing\n```\nconsole.assert(1 === 2, 'That is wrong'); //only fired when assertion is wrong \n```\n- Clearing\n```\nconsole.clear()\n```\n- Viewing DOM elements\n```\nconst p = document.querySelector(\"p\")\nconsole.log(p); //view the element\nconsole.dir(p); //show methods and properties\n```\n- Grouping together\n```\n const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]\n     dogs.forEach(dog =\u003e {\n      console.group(`${dog.name}`);\n      console.log(`This is ${dog.name}`);\n      console.log(`${dog.name} is ${dog.age} years old`);\n      console.log(`${dog.name} is ${dog.age * 7} dog years old`);\n      console.groupEnd(`${dog.name}`);\n    })\n```\n- Counting\n```\nconsole.count('Hermione')\nconsole.count('Ron')\nconsole.count('Harry')\n```\n- Timing\n```\nconsole.time('fetching data');\n    fetch('https://api.github.com/users/Kubrianity')\n      .then(data =\u003e data.json())\n      .then(data =\u003e {\n        console.timeEnd('fetching data');\n        console.log(data);\n      })\n```\n- Table\n```\nconsole.table(dogs)\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubrianity%2Fchrome-dev-tools-tricks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkubrianity%2Fchrome-dev-tools-tricks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkubrianity%2Fchrome-dev-tools-tricks/lists"}