We create software.

Home About Hire Us Products Blog

Browsing C++ Source Code on the Web

Posted by Olivier Goffart on 18 September 2012

As a developer, I write code, but I also read a lot of code. Often the code of other people. It is easy to get lost among all the functions, objects or files. What calls what? What does this function exactly do? Where is this variable modified? It is important that as much information as possible can be presented or easily accessible.

Good IDEs are good at displaying that information and ease the navigation in the source code. But often, I want to browse source code which I don't necessarily have on my hard drive. While I look at code on the web, I am very disturbed by the poor browsing experience. This is why I developed an online code browser.

Introducing the Woboq Codebrowser

Inspired by the UI of KDevelop (my favorite IDE) and using clang as a parser, I was able to imitate the KDevelop UI. But there is also a Qt Creator skin, for those who like it sober.

Screenshot with KDevelop style screenshot with QtCreator style

The idea is a bit based on LXR or Mozilla's DXR. But the goal is more to give better visualization and browsing experience rather than a search tool.

Semantic highlighting

Once you have tasted the semantic highlighting, you cannot go back to non properly highlighted code.

In this screen shot one can see the KDevelop color scheme. Green for types, dark yellow for members of the current class. Light color for local variables, with different color depending on the variable, allows you to quickly recognize what is what. Virtual methods are in italic.

When you hover over a symbol, all its use gets highlighted.

Navigation

Click on a symbol brings you to the definition of this symbol. You can browse code like you browse web. Open links in new tabs or go back in your browser history.

Tooltips

Tooltip

That's where it is getting interesting: Most of the symbols have a tooltip reminding you of the type of the symbol. The name of the arguments of the function, and even its default arguments. It will show what it thinks might be the documentation for a given symbol directly in the tooltip.

You can also can see the locations where a given function or variable is used. And if you click on it you get redirected to the right location.

Browse code now!

Woboq is hosting the code of some stuff which we find useful: Qt5 (contains V8, JavascriptCore, ...), Qt4, Qt creator, KDE (most of the modules, plus some extra like Quassel), LLVM/Clang, the linux kernel, glibc.

So if you ever wanted to look deeper in the implementation of some of your program, visit http://code.woboq.org.

Technical Details

The HTML pages are generated using a tool that use the clang library from the LLVM project. It parses the code as if it was compiling it, and visit the AST to annotate every token, and build an index of the uses and definitions.

It currently handles C++ and C.
I did not spend much time on template, or on the preprocessor (macros). So it is still not as good as KDevelop in this respect.

Contact us if you are interested to use it for your own sources.

Update: The source code and licence plan are now available.

Submit on reddit Submit on reddit Tweet about it Share on Facebook Post on Google+

If you like this blog and want to read similar articles, consider subscribing via our RSS feed, by e-mail or follow us on twitter or add us on G+..

You can also Flattr this blog posting or it or !