Inject CSS with chrome developer tool?

Question

Where can I add CSS to the page I\'m viewing? I don\'t want to add style to one element directly, I want to add a \'document\' to a page to debug changes before editing the

Answer 1

Go to the sources tab in dev tools and right click in the left column, then add folder to workspace and use file explorer to select the folder that contains your css file. You will have to allow to make changes, once you do this you will see your folder in the sources tree(MAKE SURE YOU SELECT FILESYSTEM TAB UNDER SOURCES TAB), open your folder find the file and right click on the your css file and select map to network resource. Once you map the file you can open and see it in the workspace and from that file any change made will affect the page styles. So basically your styles will over ride the served styles.